Grid Playground

Интерактивно настраивайте CSS Grid и копируйте готовый код.

Колонок: 3

Рядов: 2

Gap: 10px

justify-items

align-items

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
  justify-items: stretch;
  align-items: stretch;
}

Зачем использовать Grid Playground?

Обучение

Визуально изучайте работу CSS Grid, экспериментируя с колонками, рядами и выравниванием.

Вёрстка

Быстро подбирайте параметры сетки и копируйте готовый CSS-код в свой проект.