Как объединить ячейки css grid

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

В первой части этой статьи мы знакомились с вёрстой макетов 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 пикселя и расстоянием между ними шесть пикселей по вертикали и десять по горизонтали.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Z-index

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

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

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

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

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

[Адаптивная вёрстка 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 не противопоказан. Тем более, если снова вспомнить историю, Всемирная Паутина начиналась отнюдь не с корпоративных веб-порталов.

Источник

Как объединить ячейки в css grid?

Здравствуйте.
Есть такой пример https://jsfiddle.net/Lf4r2x9d/
Цветные блоки имеют динамическую высоту. Возможно их расположить так же в две колонки не меняя структуру html, при этом чтобы по вертикали не было пустоты? Или без использования скриптов это не возможно?
Я пытался использовать grid-row-start / -end, но у меня ничего не получилось.

Я не могу понять для чего у вас для пятого айтема высота ноль задана. Атак по вашему вопросу вот:

.grid > div:nth-child(even) background-color: #f00;
>
.grid > div:nth-child(odd) background-color: #00f;
>
.grid display: grid;
grid-gap: 5px;
align-items: flex-start;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(6, max-content);

>
.item-1 height: 50px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;

>
.item-2 height: 100px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
>
.item-3 height: 130px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 6;
>
.item-4 height: 40px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
>
.item-5 height: 0px;
>
.item-6 height: 60px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 6;
>

Проверил ваше решение. Если для .item-1 задать высоту в 150px, то в правой колонке появится отступ. https://jsfiddle.net/4kg13mr6/

Для демки. Как я написал изначально, высота динамическая. Можете ее убрать, а в блоки добавить произвольное количество текста.

.grid > div:nth-child(even) <
background-color: #f00;
>
.grid > div:nth-child(odd) <
background-color: #00f;
>
.grid <
display: grid;
grid-gap: 5px;
align-items: flex-start;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(24, max-content);

>
.item-1 height: 100%;
width: 350px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 12;

>
.item-2 height: 100%;
width: 350px;

grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 10;
>
.item-3 <
height: 100%;
width: 350px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 12;
grid-row-end: 24;
>
.item-4 height: 100%;
width: 350px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 10;
grid-row-end: 17;
>
.item-5 height: 0px;
>
.item-6 height: 100%;
width: 350px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 17;
grid-row-end: 24;
>

Источник

CSS Grid Layout: Применение областей сетки

От автора: эта статья является частью серии «CSS Grid Layout». Одна вещь, о которой мы упоминали, но пока что должным образом не рассматривали в этой серии — это какие области имеет CSS сетка. До сих пор наши элементы сетки содержались в одной ячейке сетки, но мы можем создавать более практически применимые макеты, нарушая эти границы. Давайте рассмотрим как!

Определение областей сетки

Вот сетка, с которой мы работали: девять элементов сетки, автоматически размещенных в трех равных столбцах, трех равных строках, разделенных зазорами в 20px.

В настоящее время наши элементы имеют только цветовые стили, но вернемся к тому, что мы узнали в первой статье, и добавим правила grid-column и grid-row, на этот раз дополнив их:

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

В этом сокращенном выражении grid-column мы эффективно используем grid-column-start и grid-column-end, сообщая, что элемент должен начинаться с линии сетки 1 и заканчиваться на лини 3 сетки.

Вот что это нам дает; первый элемент теперь распространяется на две ячейки, сдвигая другие элементы вправо и вниз в соответствии с алгоритмом автоматического размещения Grid.

То же самое можно сделать со строками, что даст нам гораздо большую область в верхнем левом углу сетки.

Объединение ячеек

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

Это дает нам тот же результат, но если бы мы изменили место, где начинается элемент, его конец мы могли бы не указывать отдельно.

В следующей демо-версии вы видите, что мы очистили макет, удалив четыре элемента. Мы указали позиционирование для двух элемента: первый охватывает два столбца и две строки, в то время как четвертый начинается в столбце 3, строке 2 и распространяется вниз на две линии:

Остальные элементы автоматически заполняют доступное пространство. Это прекрасно демонстрирует, что макет сетки не должен отражать исходный порядок элементов.

Примечание. Существует много ситуаций, когда исходный порядок должен полностью отражать представление — не забывайте о доступности.

Именованные области

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

В частности, они позволяют нам именовать области сетки. С помощью именования областей мы можем ссылаться на них (вместо номеров строк) для указания позиций. Давайте придерживаться нашей текущей демо-версии и используем ее, чтобы создать приближенный макет страницы, включающий:

Мы определяем эти области в контейнере сетки, как будто рисуем их:

Источник