Grid

CSS Grid — двумерный layout с явными строками, столбцами, named areas и auto-placement. Tracks бывают фиксированными, гибкими (`fr`) или intrinsic (`minmax`, `fit-content`).

					.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}
				

`auto-fit` схлопывает пустые tracks; `auto-fill` сохраняет их. Grid отлично подходит для внутренностей компонентов (формы, дашборды) — не только для каркаса страницы.

На интервью: Grid vs Flexbox, sizing tracks и адаптивная сетка карточек без лишних breakpoints.

Компромисс: явный контроль tracks против intrinsic адаптивности через minmax и fr.

Типовые ошибки: только pixel tracks убивают intrinsic адаптивность; игнор `minmax(0, 1fr)` при overflow контента в tracks.

Чеклист:

• Grid, когда важны обе оси.
• Intrinsic tracks через minmax.
• Named areas для стабильных регионов.
• Auto-placement снижает boilerplate.