Particle1Particle2Particle3Particle4Particle5
HWdTech / Блог /

Плитка Grid

с автоподгонкой

и min-max

Сегодня переводим полезный пост с gedd.ski, «Grid Tile Layouts with auto-fit and minmax», от разработчика Дейва Геддеса, основателя Mastery Games.

12 Марта 2020
#css #front-end

Reading time: 10 min

Вот ссылка на оригинал статьи.

Tile (то есть, «плитка» — прим. переводчика) layouts — это, возможно самый распространенный макет, который используют фронтенд-разработчики, особенно для областей с контентом. Как выяснилось, tile layouts очень просто верстать с помощью новых свойств — minmax и auto-fit, которые поставляются вместе с CSS Grid. Сегодня мы поговорим о том, как это сделать и покажем удобный способ создания идеальных адаптивных «плиточных» макетов.

Плитки повсюду

Вы точно знакомы с примерами, приведенными далее! Практически все страницы в Google Play Music созданы с помощью tile layouts:
пример плитки 1
Кроме того, многие блоги (в том числе, блог автора) размещают перечень постов в формате плитки.
плитка в блоге, пример 2
Вы, вероятно, никогда не видели страницу Twitter moments, но она тоже состоит из плиток, где некоторые элементы сетки занимают больше ячеек, чем другие – получается нечто вроде «мозаики».
мозайка, пример 3
Ну, вы поняли. Tile layouts везде.

Для чего нам нужен auto-fit?

Мы используем новое свойство auto-fit для создания плиточных макетов. С его помощью мы задаем параметры так, чтобы Grid создавал столько колонок заданного размера, сколько может поместиться в пространстве контейнера (<div>). Предположим, мы хотим разделить наш контейнер на колонки шириной 200px. Мы не задаем количество колонок, а предполагаем, что он «автозаполнится» - их будет столько, сколько туда влезет:

.app {

display: grid;

grid-gap: 15px;

grid-template-columns: repeat(auto-fit, 200px);

}

плитка шаблон 1
В этом div шириной 1400 px у нас с комфортом разместились шесть колонок шириной 200 px с промежутками в 15 px между ними. И еще немного места осталось – оно-то нас и смущает. Мы могли бы сказать «И так сойдет!» - и наш tile layout будет не хуже, чем многие другие. Но посмотрите на правую сторону нашего контейнера: там осталась большая пустая область, в которой не хватило места для еще одной колонки. Она портит все впечатление. В CSS Grid есть хорошие инструменты, чтобы исправить этот недочет и сделать наш макет еще лучше.

Minmax() поможет!

Мы можем настроить наш макет так, чтобы плитки заполняли весь контейнер, а не оставляли пустое пространство в конце. И мы сделаем это путем создания гибких колонок с помощью minmax:

.app {

display: grid;

grid-column-gap: 15px;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

плитка шаблон 2
Пустое место справа исчезло!

Как у нас это получилось?

Свойство «minmax(200px, 1fr)» заставило наши колонки шириной 200 px создаваться как и в прошлый раз – столько, сколько поместится в контейнере. И их также получилось шесть штук. Более того, как и раньше, осталось примерно 130 px свободного места. Но на этот раз Grid равномерно распределил это дополнительное пространство между шестью плитками, поскольку их максимальный размер был задан не только в пикселях, но и равным 1fr (1 доля свободного пространства). Такое сочетание auto-fit и minmax сделало нашу плиточную раскладку гибкой и полноразмерной.

Адаптивность

Самое приятное заключается в том, что наш макет будет хорошо отображаться на экранах любых мобильных устройств. Каждый раз, когда для очередной 200-пиксельной колонки больше не хватит места, Grid автоматически создаст новую строку и переместит элементы в нее. Значение minmax в 1fr гарантирует то, что элементы всегда будут заполнять всю строку. И это только одна из причин, почему CSS Grid так хорош для адаптивных макетов.

Больше крутых макетов с плитками

Теперь, когда вы познакомились с основами верстки плиток на Grid, давайте немного повеселимся. С помощью repeat() мы можем повторять не только колонки или строки, но и целые группы колонок/ строк.

.app {

display: grid;

grid-column-gap: 15px;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) 150px);

}

На этот раз мы задаем для Grid повторение стольких групп, сколько поместится, состоящих из гибких колонок шириной в 300 px и фиксированных колонок шириной 150 px.
плитка шаблон 3
Этот макет создается так же, как и предыдущий, за исключением одного момента: гибкие колонки забирают часть дополнительного пространства себе после того, как алгоритм auto-fit сделает свое дело.

Варьируем плитки

Ранее в статье автор упоминал, что Twitter moments – это просто страница с tile layout, где некоторые элементы Grid занимают больше ячеек, чем другие. Давайте сверстаем нечто подобное, причем так, чтобы каждый третий элемент контейнера занимал два столбца, а каждый пятый – две строки:

.item:nth-of-type(3n) {

grid-column: span 2;

}

.item:nth-of-type(5n) {

grid-row: span 2;

}

плитка шаблон 4
Мы получили довольно крутой результат, но он выглядел бы еще лучше, если бы мы использовали свойство dense для определения способа размещения элементов Grid.

.app {

grid-auto-flow: dense;

}

плитка шаблон 5
Это заставило Grid вернуться к ранее пропущенным ячейкам и упаковать элементы настолько плотно, насколько это возможно.

Пробуем на практике!

Google Music, Twitter и макеты блогов – это все, конечно, хорошо. Но давайте посмотрим на применение CSS Grid для чего-то гораздо более вдохновляющего: фотогалереи Сэма – лучшей собаки в мире. Очевидно, речь идет о питомце автора этой замечательной статьи (прим. переводчика). Крошечное дополнение к тому, что мы уже сделали: используем «grid-auto-rows» для того, чтобы все строки, которые сгенерирует auto-fit, были высотой в 200 px.

.gallery {

display: grid;

grid-gap: 15px;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

grid-auto-rows: 200px;

grid-auto-flow: dense;

}

.wide {

grid-column: span 2;

}

.tall {

grid-row: span 2;

}

плитка итоговый пример
Прелестный зверь! Она выглядит еще милее в галерее, созданной с помощью tile layout.

Познайте мощь Grid

По мнению автора, CSS Grid - это просто фантастика, и мы с вами только начали изучать все его возможности. Дейву очень нравятся макеты журналов, сайты игр и сами игры, которые он разрабатывает при помощи данного инструмента. В следующий раз, когда вам понадобится заняться версткой плиток, CSS Grid, auto-fit и minmax вам в этом помогут. Кроме того, автор заостряет внимание аудитории на игре «Gridcritters», о которой мы писали ранее в совсем другом посте с подборкой игр для изучения JS. Можете посмотреть этот материал по ссылке: https://hwdtech.ru/blog/cs_games Там же, кстати, есть другие интересные игры для изучения CSS Grid.
Читайте также

Наши статьи!

Спросите нас

Мы ответим в течение суток

* - обязательное поле

Нажимая на эту кнопку, вы соглашаетесь с обработкой ваших персональных данных и принимаете нашу политику обработки конфиденциальных данных