CSS Grid Generator

Настройки сетки

Превью

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
  height: 400px;
}

.header {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.sidebar {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.main {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

.footer {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}