CSS Grid Layout: возвращение табличной вёрстки. Часть 2

Во второй части статьи о верстке веб-страниц с помощью CSS Grid Layout уделим внимание практической стороне этой технологии. Перед прочтением ознакомьтесь с первой частью статьи.

Явное определение свойств сетки-таблицы CSS Grid

В первой части этой статьи мы знакомились с вёрстой макетов HTML-страниц с помощью CSS Grid Layout. И по ходу выяснили, что это по сути возвращение к интуитивно понятным принципам вёрстки табличками, практиковавшейся повсеместно в годы первоначального накопления контента во Всемирной Паутине.

Автоматизация — главное, чем отличается CSS Grid Layout от табличной HTML-вёрстки Общий алгоритм этой автоматизации прост. Если элемент веб-страницы имеет свойство отображения display: grid, то браузерный модуль CSS Grid автоматически нарисует на месте этого элемента сетку-табличку согласно явно или по умолчанию заданным свойствам и автоматически заполнит ячейки этой таблички дочерними элементами. Осталось только попрактиковаться с основными свойствами CSS Grid, чтобы получался нужный табличный шаблон.

По умолчанию, если все параметры сетки не заданы явным образом, модуль CSS Grid нарисует табличку в одну колонку, где для каждого элемента будет выделена ячейка в новом ряду. Ширина колонки будет занимать всё свободное место по ширине, а высота каждого ряда будет подогнана к высоте каждого элемента. Зазор между ячейками отсутствует.

Но мы ведь хотим чего-то большего в этой жизни, чем табличка в одну колонку. Поэтому придётся задавать для неё некоторые свойства явным образом.

Основные параметры любой таблицы это количество колонок и рядов, их размеры и зазор между ячейками. В CSS Grid количество и размер колонок явно задаётся CSS-свойством grid-template-columns, количество и размер рядов — свойством grid-template-rows, а свойства grid-column-gap и grid-row-gap зададут ширину вертикальных и горизонтальных дорожек между ячейками.

Для примера сверстаем с помощью CSS Grid шаблон галереи изображений. Ниже пример шаблона галереи на четыре колонки и три ряда с ячейками по 220х164 пикселя и расстоянием между ними шесть пикселей по вертикали и десять по горизонтали.

.mygrid{
    display: grid;
    grid-template-columns: 220px 220px 220px 220px;
    grid-template-rows: 164px 164px 164px;
    grid-column-gap: 6px;
    grid-row-gap: 10px;
}

После чего забрасываем наши картинки с самым популярным контентом Веба — котиками и собачками — в этот шаблон и автоматически получаем галерею.

<div class="mygrid">
    <img src="dog1.jpg"> <img src="dog2.jpg"> <img src="dog3.jpg">
    <img src="dog4.jpg"> <img src="dog5.jpg"> <img src="dog6.jpg">
    <img src="cat1.jpg"> <img src="cat2.jpg"> <img src="cat3.jpg">
    <img src="cat4.jpg"> <img src="cat5.jpg"> <img src="cat6.jpg">
</div>

[Галерея с помощью CSS Grid]

Ещё больше лаконизма

Как видим, даже в самом явном виде таблица CSS Grid не теряет своей компактности, о которой с большим пафосом было написано в первой части статьи.

А можно ли сделать явное определение сетки CSS Grid ещё более коротким? — Можно. Для этого следует использовать нотацию repeat(), чтобы указанное количество раз повторить структуру трека. И галерею выше можно определить так:

.mygrid{
    display: grid;
    grid-template-columns: repeat(4, 220px);
    grid-template-rows: repeat(3, 164px);
    grid-column-gap: 6px;
    grid-row-gap: 10px;
}

В огромных сетках-таблицах с большим количеством ячеек нотация repeat() будет часто выручать.

Но и это ещё не предел компактности. Как и многие определения каскадных таблиц стилей, свойства CSS Grid имеют сокращённую форму записи. Колонки и строки можно описать одним свойством grid. Сокращённая форма для зазоров между ячейками — gap.

Пример явного определения той же галереи картинок с использованием свойств grid и gap:

.mygrid{
    display: grid;
    grid: repeat(3, 164px)/repeat(4, 220px);
    gap: 10px 6px;
}

Ещё больше автоматизации

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

Если элементов в контейнере больше, чем явно задано в определении сетки, то модуль CSS Grid просто самостоятельно дорисует новые ячейки в таблице. И этой автоматизацией можно управлять посредством свойств grid-auto-rows, grid-auto-columns.

Например, для нашей галереи можно определить свойство grid-auto-rows, чтобы ряды, создаваемые автоматически, были высотой 164 пикселя. И у нас получится снова та же самая галерея.

.mygrid{
    display: grid;
    grid-template-columns: repeat(4, 220px);
    grid-auto-rows: 164px;
    gap: 10px 6px;
}

Grid area — объединение ячеек

В HTML-таблицах было возможно объединение ячеек через атрибуты colspan и rowspan. Объединение ячеек возможно и в CSS Grid. Объединённые ячейки называются grid area.

Ряды в таблицах CSS Grid ограничены горизонтальными линями, а столбцы вертикальными. Каждая линия имеет свой номер, по которому к ней можно обращаться.

[Линии CSS Grid]

Указывая номера четырех линий, ограничивающих по горизонтали и вертикали CSS несколько ячеек в сетке, можно выделить область, в которой эти ячейки будут объединены в одну большую. Задаётся grid area, отдельным классом в правилах CSS через свойства grid-row-start, grid-column-start, grid-row-end, grid-column-end.

Например, объединим в нашей галерее первые две ячейки первого и второго ряда в одну область для большой картинки.

.myarea {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 3;
}

Существует и короткий вариант этой записи посредством свойства grid-area.

.myarea { grid-area: 1/1/3/3; }

Потом присвоим этот класс нужному нам элементу, который и займёт всю эту область объединённых ячеек. А мы без особого труда получим галерею в стиле «Metro Windows»

<div class="mygrid">
    <img class="myarea" src="bigdog.jpg">
...
</div>

[Объединение ячеек в CSS Grid]

Z-index

В отличие от HTML-таблиц в CSS Grid ячейки и области расположены не только в плоскости — они могут располагаться ещё и «стопочкой», как слои в «Фотошопе». Каждому слою можно задать номер через специальное свойство z-index. Чем больше номер, тем выше область или ячейка Grid Layout по сравнению с другими ячейками. Это позволяет использовать свойство z-index для эффекта наложения областей и ячеек друг на друга.

.myarea {
    grid-area: 1/1/3/3;
    z-index: 4;
}

[Эффект перекрывания областей в CSS Grid]

Адаптивная вёрстка

Адаптивная вёрстка веб-страницы предполагает, что шаблон страницы будет гибко трансформироваться в зависимости от размеров и пропорций дисплея. В CSS Grid адаптивная вёрстка включается использованием ключевого слова auto-fill или auto-fit в функции repeat(), которую мы рассматривали выше. И всё.

.mygrid{
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px);
    grid-auto-rows: 164px;
    gap: 10px 6px;
}

В результате наша галерея будет автоматически подстраиваться по количеству колонок в зависимости от размеров и разрешения дисплея.

[Адаптивная вёрстка CSS Grid]

Заключение

Чем отличается auto-fill от auto-fit, а также использование новой единицы измерения «фракция», функции «резинового размера» minmax(), свойства порядка автоматического заполнения ячеек grid-auto-flow — всё это оставим уже в качестве домашнего задания. Потому что цель этой статьи показать практическую простоту использования CSS Grid Layout. Интуитивная понятность, лаконизм, автоматизация CSS Grid действительно упростит жизнь при создании сайтов.

Практически все современные браузеры — MS Edge, Firefox, Opera, Chrome — хвастают поддержкой CSS Grid Layout Level 1. За исключением, как можно догадаться, MS Internet Explorer. Поэтому разного рода корпоративным веб-дизайнерам, можно сказать, не повезло. Но создателям обычных частных личных сайтов CSS Grid не противопоказан. Тем более, если снова вспомнить историю, Всемирная Паутина начиналась отнюдь не с корпоративных веб-порталов.