Генератор сіток

Створюйте складні CSS Grid макети з живим превʼю та експортом коду

← На головну

Перетягуй картки в прев'ю, щоб закріпити їх у потрібних клітинках.

Стек елементів

Елементи сітки

Елемент 1#1
Елемент 2#2
Item 1
Item 2

Експорт HTML

<div class="grid-container">
  <div class="grid-item-1">Item 1</div>
  <div class="grid-item-2">Item 2</div>
</div>

Експорт CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: 16px;
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}
.grid-item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: #667eea;
}
.grid-item-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: #764ba2;
}