Как работает CSS Grid?

Вопрос

Чем CSS Grid отличается от Flexbox и как им пользоваться?

Короткий ответ

Grid — двумерная модель компоновки: одновременно управляет и строками, и колонками, поэтому подходит для сложных макетов страниц.

Подробный ответ

Основные свойства контейнера (display: grid):

• grid-template-columns / grid-template-rows — задают размеры колонок/строк (1fr, repeat(3, 1fr), minmax()).
• gap — отступы между ячейками.
• grid-template-areas — именованные области для декларативной раскладки.
• place-items — сокращение для align-items + justify-items.

Единица fr (fraction) распределяет свободное пространство пропорционально — это то, чего не хватало обычному CSS до Grid.

Элементы могут явно занимать несколько ячеек через grid-column: span 2 или указывать конкретную область через grid-area.

Пример

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  gap: 16px;
}

.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }

Дополнительные вопросы

• Что такое неявные (implicit) треки в Grid?
• Как работает minmax() и auto-fit/auto-fill?
• Можно ли комбинировать Grid и Flexbox в одном проекте?