Grid-генератор

С клавиатуры: стрелки — переход по ячейкам, Enter или пробел — начать область и закончить её, Esc — отменить.

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

Сетка из 2 колонок и 3 строк: размеры колонок задаёт grid-template-columns, строк — grid-template-rows. Треки в fr делят место, которое осталось после фиксированных треков и промежутков, пропорционально своим числам. Трек auto подстраивается под содержимое. grid-template-areas рисует схему словами: каждая строка в кавычках — строка сетки, одинаковое имя в соседних ячейках объединяет их в область, точка — пустая ячейка. Элемент попадает в область через grid-area.