Перевод статьи «Grid Tile Layouts with auto-fit and minmax» от Dave Geddes. Рассматривается способ создания масонри-раскладки на гридах.
Плиточная раскладка, вероятно, самый распространённый вид раскладки в фронтэнде. Особенно, для материалов. И свойства minmax и auto-fit, которые пришли вместе с CSS-гридами, сделали такую раскладку, как никогда, лёгкой для создания. Позвольте показать новый лёгкий способ создания адаптивной плиточной раскладкой на CSS-грид.
Плитка раскладка везде
Вы, возможно, узнали эту раскладку. Почти все страницы Google Music выглядят так:
Примечание: только я думаю, что все новые релизы ужасны? Они просто сдались? Одна из групп реально назвалась мусором (Garbage)?
В любом случае, многие блоги (в том числе и мой) выглядят так:
Вы, наверное, никогда не видели страницу моментов в Твиттер, потому что она бесполезна, но она тоже состоит из плиток, где некоторые плитки побольше:
Ну вы поняли. Плитки везде.
Auto-fit был сделан для этого
Мы будем использовать свойство auto-fit для создания раскладки. Это заставит Grid создать много колонок указанного размера, которые поместятся в контейнере.
Итак, давайте укажем, что мы хотим разделить контейнер на колонки шириной в 200px:
.app {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fit, 200px);
}
В этом контейнере, который имеет ширину 1400px, достаточно места, чтобы создать шесть колонок по 200px, учитывая 15px отступы между ними.
Можете посчитать, что этого достаточно и начать это использовать. Но посмотрите на правую часть: там осталась пустая область, потому что не хватило места для ещё одной колонки.
Гриды могут помочь нам улучшить нашу сетку.
Minmax() поможет вам
Мы можем регулировать нашу сетку так, чтобы она занимала всё пространство контейнера, а не оставляла пустоту в конце.
Мы создадим гибкие колонки с помощью minmax.
.app {
display: grid;
grid-column-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Больше нет потерянного пространства!
Какого чёрта здесь происходит?
minmax(200px, 1fr) сделал так, чтобы наши колонки имели минимальный размер 200px. Создалось столько колонок, сколько влезло (шесть). И осталось примерно 130px свободного пространства, как и раньше. Но теперь это пространство равномерно распределилось между колонками из-за установки максимального значения 1fr (одна часть свободного пространства).
Это комбинация auto-fit и minmax сделала нашу сетку гибкой.
Адаптивность готова
Отличная новость: сетка, созданная таким способом, хорошо выглядит и на маленьких экранах.
Каждый раз, когда для появится место для новой колонки, она будет создана. Если места для колонки нет — свободное пространство будет отдано уже созданным колонкам.
Сделаем круче: масонри-сетка на гридах
Теперь, когда вы поняли, как это работает, давайте ещё допилим нашу сетку.
Когда мы используем repeat(), мы можем указать не только один вариант, но и набор шаблонов.
.app {
display: grid;
grid-column-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) 150px);
}На этот раз мы говорим, что хотим сетку, которая состоит из гибких колонок в 300px и фиксированных по 150px.
Эта сетка работает по тому же принципу, что и предыдущая, за исключением того, что гибкие колонки берут дополнительное место себе.
Варьируем плитки
Я уже говорил, что страница моментов в Твиттер — это просто сетка, в которой некоторые плитки занимают больше места. Давайте сделаем то же самое: каждая третья ячейка будет в два раза шире, а каждая пятая — в два раза выше.
.item:nth-of-type(3n) {
grid-column: span 2;
}
.item:nth-of-type(5n) {
grid-row: span 2;
}
Выглядит прикольно, но получится лучше, если мы будем использовать свойство dense для определения способа размещения элементов грида.
.app {
grid-auto-flow: dense;
}
Раскладка начала выглядеть так, потому что грид вернулся к пропущенному месту и вставил туда ячейку, если места хватает.
Пример практического использования
Google Music, Twitter и блоги — это всё хорошо. Но давайте сделаем что-то вдохновляющее — фотогалерею для Сэм, лучшей собаки в мире.
Всё, что мы дополнительно сделали — добавили grid-auto-rows, чтобы сделать ряды высотой в 200px.
.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;
}
Поделиться