Объединение рядов в CSS гридах
Ряды и колонки в гридах формируют сетку. Можно сделать так, чтобы элемент занимал не одну ячейку сетки, а несколько.
Для того, чтобы элемент занял более
одного ряда, ему следует задать
свойство grid-row.
В этом свойстве через слеш задаются
числа, указывающее начальную
и конечную позицию элементов
в гриде.
При этом элемент растянется от
первой позиции до второй позиции
(не включая ее). То есть
значение 1 / 2 заставит
элемент занять одну первую
ячейку, а значение 1 / 3
заставит элемент занять
первую и вторую ячейку (но
не включая третью).
Пример
Пусть у нас есть грид с тремя дочерними элементами. Давайте разместим их так, чтобы первый элемент занимал два ряда:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr;
height: 300px;
width: 400px;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 3; /* два ряда */
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
}
:
Пример
Теперь давайте назначим четвертому блоку три ряда:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr;
height: 300px;
width: 400px;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
#elem4 {
grid-row: 1 / 4;
}
:
Практические задачи
Разместите все элементы и выполните объединение рядов в соответствии со следующим примером:
Разместите все элементы и выполните объединение рядов в соответствии со следующим примером:
Разместите все элементы и выполните объединение рядов в соответствии со следующим примером: