12 Марта 2020
Reading time: 10 min
Вот ссылка на оригинал статьи.
Tile (то есть, «плитка» — прим. переводчика) layouts — это, возможно самый распространенный макет, который используют фронтенд-разработчики, особенно для областей с контентом.
Как выяснилось, tile layouts очень просто верстать с помощью новых свойств — minmax и auto-fit, которые поставляются вместе с CSS Grid. Сегодня мы поговорим о том, как это сделать и покажем удобный способ создания идеальных адаптивных «плиточных» макетов.
Плитки повсюду
Вы точно знакомы с примерами, приведенными далее! Практически все страницы в Google Play Music созданы с помощью tile layouts:
Кроме того, многие блоги (в том числе, блог автора) размещают перечень постов в формате плитки.
Вы, вероятно, никогда не видели страницу Twitter moments, но она тоже состоит из плиток, где некоторые элементы сетки занимают больше ячеек, чем другие – получается нечто вроде «мозаики».
Ну, вы поняли. Tile layouts везде.
Для чего нам нужен auto-fit?
Мы используем новое свойство auto-fit для создания плиточных макетов. С его помощью мы задаем параметры так, чтобы Grid создавал столько колонок заданного размера, сколько может поместиться в пространстве контейнера (<div>).
Предположим, мы хотим разделить наш контейнер на колонки шириной 200px. Мы не задаем количество колонок, а предполагаем, что он «автозаполнится» - их будет столько, сколько туда влезет:
.app {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fit, 200px);
}
В этом 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));
}
Пустое место справа исчезло!
Как у нас это получилось?
Свойство «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.
Этот макет создается так же, как и предыдущий, за исключением одного момента: гибкие колонки забирают часть дополнительного пространства себе после того, как алгоритм 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;
}
Мы получили довольно крутой результат, но он выглядел бы еще лучше, если бы мы использовали свойство dense для определения способа размещения элементов Grid.
.app {
grid-auto-flow: dense;
}
Это заставило 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.
Читайте также
