CSS Grid: построение макетов из строк и столбцов

Коротко: CSS Grid размещает элементы в двумерной сетке строк и столбцов; он идеален для макетов целых страниц, тогда как Flexbox подходит для строк или столбцов внутри отдельных областей.

Подробнее: С display: grid контейнер становится сеткой. Вы задаёте столбцы и строки; дочерние элементы заполняют ячейки автоматически или размещаются намеренно.

Подробности

Основы

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

fr — доля свободного пространства. gap задаёт промежутки между ячейками. С grid-column: 1 / 3 элемент занимает два столбца; grid-template-areas позволяет задавать именованные области («head head», «side content»).

Адаптивность без медиазапроса

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); создаёт столько столбцов, сколько помещается, шириной не менее 220 px. Один столбец на телефоне, четыре на десктопе, без единой точки перелома. minmax(), auto-fill/auto-fit и aspect-ratio — ключевые инструменты.

Grid или Flexbox?

• Grid: двумерный, макет снаружи (сначала сетка, содержимое заполняет).
• Flexbox: одномерный, макет изнутри (размер определяет содержимое), например панели навигации.
• Их можно сочетать: Grid для каркаса страницы, Flexbox для строк внутри ячеек.
• Subgrid (grid-template-columns: subgrid) позволяет дочерним элементам использовать дорожки родительской сетки; доступен в современных браузерах.

Как избежать ошибок

• Слишком много фиксированных значений в пикселях; предпочитайте fr, minmax, %.
• Не меняйте порядок лишь визуально: порядок Tab и программ чтения с экрана следует исходному коду.
• Используйте инструменты сетки в инструментах разработчика браузеров, чтобы сделать дорожки видимыми.

См. также: Flexbox, Медиазапросы и точки перелома, Tailwind CSS