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

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

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

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

Автоматизация — главное, чем отличается CSS Grid Layot от табличной 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 Layot по сравнению с другими ячейками. Это позволяет использовать свойство 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 Layot . Интуитивная понятность, лаконизм, автоматизация CSS Grid действительно упростит жизнь при создании сайтов.

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

Опубликовал: Михаил Астапчик, 13 марта, 2019

https://www.kv.by/post/1056709-css-grid-layot-vozvrashchenie-tablichnoy-vyorstki-chast-2