Комбінації об'єднань по рядах і стовпцях у CSS гридах

Вивчаємо комбінування властивостей grid-row і grid-column для створення складних макетів у CSS Grid.

Комбінації об'єднань по рядах і стовпцях у CSS гридах

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

Для цього використовуються властивості grid-row та grid-column, які дозволяють елементу займати декілька клітинок сітки.

<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 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}

#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

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

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

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

#elem4 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

❗ Важливо:

grid-row визначає, скільки рядків займає елемент, а grid-column — скільки стовпців.

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

У цьому випадку перший елемент займає всі три стовпці першого ряду.

#elem2 {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

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

Так можна створювати складні макети: сайдбари, великі блоки контенту, картки та журнальні сітки.

<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: 1fr 1fr 1fr;
  height: 300px;
  width: 400px;
}

#elem1 {
  grid-column: 1 / 4;
}

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

#parent {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
}

#elem1 {
  grid-column: 1 / 4;
}

У цьому прикладі перша колонка буде у три рази ширша за інші.

#parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#elem1 {
  grid-column: 1 / 4;
}

#elem2 {
  grid-column: 4 / 5;
}

#elem3 {
  grid-column: 1 / 3;
}

#elem4 {
  grid-column: 3 / 5;
}

❗ Важливо:

grid-column: 1 / 4 означає, що елемент займає першу, другу і третю клітинки, але не включає четверту лінію.

grid-row керує об'єднанням рядків.
grid-column керує об'єднанням стовпців.
Властивості можна використовувати разом.
fr дозволяє створювати гнучкі пропорції колонок.
CSS Grid дозволяє створювати складні адаптивні макети.

📌 Завдання:

№1. Створіть grid-контейнер з п'ятьма елементами.
№2. Зробіть перший елемент на всю ширину.
№3. Другий елемент розтягніть на два рядки.
№4. Третій і четвертий елементи розмістіть поруч.
№5. П'ятий елемент зробіть нижнім блоком на всю ширину.

💡 Показати підказку

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

✅ Показати відповідь

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

#elem2 {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

#elem5 {
  grid-row: 4 / 5;
  grid-column: 1 / 5;
}