Grid как объединить две ячейки

Расположение элементов по грид-линиям с помощью CSS Grid

В статье, касавшейся основных понятий позиционирования элементов с помощью гридов, мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.

Собственно, начать квест по гридам со знакомства с пронумерованными линиями — логично, потому что в ситуации, когда вы работаете с гридами, пронумерованные линии у вас есть всегда. Линии нумеруются и для колонок, и для строк, отсчёт начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 — самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.

Базовый пример

В качестве крайне простого примера давайте возьмём грид с тремя треками-колонками и тремя треками-строками. Такой грид даёт нам по 4 линии для каждого направления.

Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу — в каждой из четырёх первых ячеек. Если вы воспользуетесь Firefox Grid Highlighter (en-US) , то увидите, как грид инициирует колонки и строки.

Подсветка нашей грид разметки в инструментах разработчка.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

.wrapper  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

Позиционирование элементов по номерам линий

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

.box1  grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; >

Если вы явно позиционируете одни элементы, другие элементы грида по-прежнему размещаются в соответствии с правилами авторазмещения. Дальше мы детально рассмотрим, как это происходит, а пока вы и сами могли заметить, что по мере размещения одних элементов, оставшиеся элементы занимают пустые ячейки грида.

Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout — возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

.box2  grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; > .box3  grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; > .box4  grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; >

Сокращения grid-column и grid-row

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

.box1  grid-column: 1 / 2; grid-row: 1 / 4; > .box2  grid-column: 3 / 4; grid-row: 1 / 3; > .box3  grid-column: 2 / 3; grid-row: 1 / 2; > .box4  grid-column: 2 / 4; grid-row: 3 / 4; >

Расположение элемента по умолчанию

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

.box1  grid-column-start: 1; grid-row-start: 1; grid-row-end: 4; > .box2  grid-column-start: 3; grid-row-start: 1; grid-row-end: 3; > .box3  grid-column-start: 2; grid-row-start: 1; > .box4  grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; >

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

.box1  grid-column: 1; grid-row: 1 / 4; > .box2  grid-column: 3; grid-row: 1 / 3; > .box3  grid-column: 2; grid-row: 1; > .box4  grid-column: 2 / 4; grid-row: 3; >

Свойство grid-area

Мы можем пойти ещё дальше и определить целую область с помощью одного единственного свойства – grid-area . Порядок свойств для грид-области следующий:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

.box1  grid-area: 1 / 1 / 4 / 2; > .box2  grid-area: 1 / 3 / 3 / 4; > .box3  grid-area: 1 / 2 / 2 / 3; > .box4  grid-area: 3 / 2 / 4 / 4; >

Порядок значений для grid-area может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращённых свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определёнными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырёх направлений относительно потока:

block-start (начало блока)
block-end (конец блока)
inline-start (начало строки)
inline-end (конец строки)

Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) — верхняя строчная линия грид-контейнера, конец блока (block-end) — последняя строчная линия контейнера. Начало строки (inline-start) — самая левая колоночная линия, поскольку начало строки — это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) — последняя колоночная линия грида.

Когда мы задаём нашу грид-область с помощью свойства grid-area , мы сначала определяем обе начальные линии block-start и inline-start , а затем обе конечные линии block-end и inline-end . Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания веб-сайты — многонаправленные структуры.

Считая с конца

Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка — самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет -1 , а линий непосредственно перед ними -2, и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (explicit grid), то есть грида, определённого с помощью grid-template-columns и grid-template-rows . Любые линии строк и колонок, добавленные неявным гридом (implicit grid) не считаются.

В примере ниже мы «перевернули» определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краёв.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

.box1  grid-column-start: -1; grid-column-end: -2; grid-row-start: -1; grid-row-end: -4; > .box2  grid-column-start: -3; grid-column-end: -4; grid-row-start: -1; grid-row-end: -3; > .box3  grid-column-start: -2; grid-column-end: -3; grid-row-start: -1; grid-row-end: -2; > .box4  grid-column-start: -2; grid-column-end: -4; grid-row-start: -3; grid-row-end: -4; >

Как растянуть элемент на длину всего грида?

Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:

.item  grid-column: 1 / -1; >

Зазоры (Gutters) или аллеи (Alleys)

Спецификация CSS Grid включает возможность добавлять промежутки (зазоры) между треками-колонками и треками-строками с помощью свойств grid-column-gap (en-US) и grid-row-gap (en-US). Эти свойства задают промежутки, которые во многом действуют точно так же, как свойство column-gap в многоколоночных макетах.

Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

.box1  grid-column: 1; grid-row: 1 / 4; > .box2  grid-column: 3; grid-row: 1 / 3; > .box3  grid-column: 2; grid-row: 1; > .box4  grid-column: 2 / 4; grid-row: 3; > .wrapper  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); grid-column-gap: 20px; grid-row-gap: 1em; >

Сокращённая запись для грид-зазоров

Оба свойства также можно записать с помощью свойства-сокращения grid-gap (en-US). Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для grid-row-gap , а второе — для grid-column-gap .

.wrapper  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); grid-gap: 1em 20px; >

В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от неё на расстоянии зазора, и вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же — определите трек, а не зазор.

Использование ключевого слова span

В дополнение к возможности обращаться к начальной и конечной линии по их номерам вы можете задать номер начальной линии, а после — количество треков, которые должен занять элемент.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div>

.box1  grid-column: 1; grid-row: 1 / span 3; > .box2  grid-column: 3; grid-row: 1 / span 2; > .box3  grid-column: 2; grid-row: 1; > .box4  grid-column: 2 / span 2; grid-row: 3; >

Ключевое слово span также можно использовать в качестве значения grid-row-start / grid-row-end и grid-column-start/grid-column-end . Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.

.box1  grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; >

Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем span 3 . Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.

.box1  grid-column-start: 1; grid-row-start: span 3; grid-row-end: 4; >

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

Также помните, что элементы на гриде могут перекрывать друг друга, если вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если вы некорректно задали начальные и конечные линии, результат может неприятно вас удивить. Firefox Grid Highlighter (en-US) будет крайне полезен в процессе обучения, особенно, когда вы строите сложные гриды.

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Панель Grid — объединение ячеек

Поведение панели Grid по умолчанию предусматривает, что каждый элемент управления занимает одну ячейку сетки, но иногда вам может понадобиться, чтобы один элемент занимал несколько строк или колонок. К счастью Grid с легкостью обеспечивает это с помощью присоединенных свойств ColumnSpan и RowSpan. По умолчанию значение этого свойства равно 1, но вы можете указать большее значение, чтобы элемент управления располагался на большем количестве строк или колонок.

Ниже приведен простой пример, в котором используется свойство ColumnSpan:

Здесь мы просто определили сетку с двумя строками и двумя колонками; каждая ячейка занимает равную долю площади. Первые две кнопки используют колонки обычным образом, но для третьей кнопки мы сделали так, чтобы она занимала две колонки во второй строке, используя атрибут ColumnSpan.

Этот пример очень простой и мы бы могли достичь такого же эффекта за счет комбинации панелей, но эти возможности панели Grid будут весьма полезны для более сложных случаев. Давайте попробуем что-то более интересное, чтобы показать насколько это мощный инструмент:

Сочетание трех рядов и трех колонок обычным способом дало бы нам девять ячеек, однако, в этом примере мы используем сочетание объединений рядов и колонок, чтобы заполнить все доступное пространство пятью кнопками. Как вы можете увидеть, элемент управления может занимать как дополнительную колонку, так и дополнительную строку, либо, как в случае с кнопкой 4 – и то, и другое.

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

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

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

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

Вопрос задан более трёх лет назад
4428 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 1

Artem-47

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

.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;
>

Ответ написан более трёх лет назад
r_g_b_a @r_g_b_a Автор вопроса

Я не могу понять для чего у вас для пятого айтема высота ноль задана

Просто для примера

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

Artem-47

Позвольте спросить, для чего вы задаете высоту в абсолютных величинах?
r_g_b_a @r_g_b_a Автор вопроса

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

Artem-47

Вы сделайте блоки действительно динамическими и проверьте решение.

Artem-47

.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;
>

Объединение колонок в GRID

Пример

Наткнулась на проблему с объединением GRID колонок.

Отслеживать
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
задан 3 июн 2020 в 17:57
Магомедсалам Магомедсалам
49 1 1 серебряный знак 7 7 бронзовых знаков
приложи свой код
3 июн 2020 в 17:58

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Объединять ячейки можно через сокращения grid-column , grid-row .

section < display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 100px); >div < border: 1px solid; >div:nth-child(6) < grid-column: 2 / 5; background-color: black; >div:nth-child(7) < grid-column: 1 / 3; grid-row: 3 / 5; background-color: red; >

Отслеживать
ответ дан 5 июн 2020 в 12:17
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак

.cell:nth-child(6) < grid-column: 2/5; >.cell:nth-child(7) < grid-area: 3/1/5/3; >

Отслеживать
ответ дан 3 июн 2020 в 19:03
11 3 3 бронзовых знака

html
css
вёрстка
css-grid

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Grid как объединить две ячейки

Расположение элементов по грид-линиям с помощью CSS Grid

Базовый пример

Позиционирование элементов по номерам линий

Сокращения grid-column и grid-row

Расположение элемента по умолчанию

Свойство grid-area

Считая с конца

Как растянуть элемент на длину всего грида?

Зазоры (Gutters) или аллеи (Alleys)

Сокращённая запись для грид-зазоров

Использование ключевого слова span

Found a content problem with this page?

Панель Grid — объединение ячеек

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

Объединение колонок в GRID

2 ответа 2

Похожие

Подписаться на ленту

Добавить комментарий Отменить ответ