Что такое CSS Grid и как он работает

Что проверяют

Умеете ли вы строить двумерный макет декларативно и понимаете ли, где заканчивается зона flexbox. Работодателя интересует, собираете ли вы сетку осознанно (строки, колонки, области) или двигаете отступы, пока картинка не сойдётся.

Как отвечать

CSS Grid это система раскладки, где контейнер задаёт сетку из строк и колонок, а дочерние элементы занимают ячейки или прямоугольные области. Контейнер объявляется через display: grid, треки задаются в grid-template-columns и grid-template-rows, промежутки в gap.

Что стоит назвать:

• единица fr делит свободное место, оставшееся после промежутков и фиксированных треков;
• minmax() и repeat(auto-fit, minmax(...)) дают адаптивную раскладку без медиазапросов;
• grid-template-areas называет области и делает разметку читаемой прямо в стилях;
• элемент ставится по номерам или именам линий: grid-column: 1 / 3 либо span 2;
• то, что не поместилось в явную сетку, попадает в неявную, её поведение задают grid-auto-rows и grid-auto-flow;
• выравнивание общее с flexbox: свойства justify и align в вариантах items, self, content.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.cards .wide { grid-column: span 2; }

Разделение простое: одна ось это flexbox, две оси это grid. В современных браузерах есть subgrid, он выравнивает содержимое вложенных карточек по линиям родительской сетки.

Где спотыкаются

Считают линии сетки видимыми разделителями и думают, что расстояние между элементами создают именно они. Линии это только координаты для размещения, расстояние задаёт gap, и по краям контейнера он ничего не добавляет.

Задают треки в долях ширины контейнера, добавляют к ним gap и получают переполнение. Ровно для этого и нужна fr. Вторая частая причина переполнения это длинное неразрывное содержимое: трек не сжимается ниже своего минимума, лечится через minmax(0, 1fr).

Переставляют элементы визуально и забывают, что порядок обхода с клавиатуры и озвучивание скринридером идут по порядку в разметке. Расхождение превращает форму в головоломку для тех, кто не пользуется мышью.