Інтерактивний урок: Layout з CSS Grid

Цей урок зосереджений на практиці.

Ти вже вивчив базові властивості CSS Grid. Тепер ти змінюватимеш їх напряму й бачитимеш, як рухаються grid items.

Що ти практикуватимеш

• grid-template-columns змінює структуру колонок.
• grid-template-rows змінює явні висоти рядків.
• gap додає простір між комірками grid.
• grid-column може змусити елемент займати кілька колонок.
• Auto-placement ставить елементи в наступну доступну комірку grid.

Спробуй інтерактивний playground

Використовуй контролери, щоб змінювати grid. Спостерігай, як preview і CSS-код оновлюються разом.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background-color: #f1f5f9;
}

.grid-item:first-child,
.grid-item:last-child {
  grid-column: 1 / -1;
}