Об'єднання рядків у CSS Grid

Об'єднання рядків у CSS Grid

У CSS Grid елемент може займати не тільки одну комірку, а декілька рядків або колонок сітки.

Для об'єднання рядків використовується властивість grid-row, яка задає початкову та кінцеву позицію елемента.

Значення записується через символ /. Наприклад, grid-row: 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>

#elem1 {
  grid-row: 1 / 2;
}

#elem2 {
  grid-row: 2 / 3;
}

#elem3 {
  grid-row: 3 / 4;
}

#elem4 {
  grid-row: 1 / 4;
}

Елемент з grid-row: 1 / 4 займає всі три рядки, починаючи з першої лінії Grid і закінчуючи перед четвертою.

Синтаксис grid-row

element {
  grid-row: початкова-лінія / кінцева-лінія;
}

• grid-row: 1 / 2 займає один рядок.
• grid-row: 1 / 3 займає два рядки.
• grid-row: 1 / 4 займає три рядки.
• Властивість задається самому Grid-елементу, а не контейнеру.

#main {
  grid-row: 1 / 5;
}

#elem1 {
  grid-row: 1 / 3;
}

#elem4 {
  grid-row: 1 / 4;
}