Перекриття стовпців у CSS Grid

Вивчаємо ситуації, коли елементи CSS Grid займають однакові стовпці та автоматично переходять на наступні рядки.

Перекриття стовпців у CSS Grid

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

Якщо місце вже зайняте іншим елементом, браузер автоматично переміщує наступний елемент на новий ряд.

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

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

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

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

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

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

Перший елемент займає всі три стовпці першого рядка. Інші елементи не можуть розміститися в цьому ж місці, тому браузер переносить їх нижче.

Властивість grid-column

Властивість grid-column визначає початкову та кінцеву лінію стовпця, який буде займати елемент.

grid-column: 1 / 4;

❗ Важливо:

Значення 1 / 4 означає, що елемент займає область від першої до четвертої лінії Grid, тобто три стовпці.

grid-column керує розташуванням елемента по горизонталі.
Якщо місце зайняте, Grid переносить елемент нижче.
Перекриття дозволяє створювати складні макети.
Позиції визначаються через номери Grid-ліній.

📌 Завдання:

№1. Створіть Grid-контейнер width: 400px.
№2. Додайте чотири дочірні блоки.
№3. Перший блок розтягніть на три стовпці.
№4. Інші блоки розмістіть у наступному рядку.

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

Для розтягування елемента використовуйте grid-column: початкова-лінія / кінцева-лінія.

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

.elem {
  grid-column: 1 / 4;
}