Что такое grid?

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

Основы

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}
.header { grid-column: 1 / -1; }

• `fr` — доля свободного пространства.
• `repeat()` и `minmax()` — для адаптивных сеток без медиазапросов:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

• `grid-template-areas` — раскладка по именам областей.

Когда использовать

Grid удобен, когда нужно управлять обоими направлениями сразу: макет страницы, галерея карточек, форма с выравниванием подписей и полей.

Коротко для собеседования

Grid — двумерная раскладка по строкам и колонкам с fr, minmax, областями и gap; подходит для макетов и сеток.

Подробнее: MDN — CSS Grid Layout