Ответ
Grid позволяет одновременно управлять элементами в двух направлениях: по строкам (row axis) и по колонкам (column axis). Это его ключевое отличие от Flexbox, который работает только в одном направлении.
Пример:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px auto;
gap: 20px;
}В этом примере мы одновременно:
- Задаем 2 колонки равной ширины
- Устанавливаем первую строку высотой 100px, вторую - автоматической
- Добавляем промежутки между элементами
Grid также позволяет выравнивать содержимое одновременно по вертикали (align-items) и горизонтали (justify-items), создавать сложные макеты с помощью grid-areas и управлять размещением элементов в обоих направлениях через grid-column/grid-row.