Если Flexbox отлично справляется с расположением элементов в одном направлении, то CSS Grid создавался специально для двумерных раскладок — когда важно контролировать расположение и по строкам, и по столбцам одновременно. Это тот инструмент, которого вёрстке действительно не хватало долгие годы.
Контейнер становится сеткой через display grid, а дальше через grid-template-columns и grid-template-rows задаётся количество и размер строк и столбцов. Значение fr, дробная единица, особенно удобно здесь — оно распределяет свободное пространство пропорционально между колонками, без необходимости высчитывать проценты вручную.
Функция repeat экономит немало кода при описании повторяющихся колонок — вместо того чтобы писать одинаковое значение шесть раз подряд, достаточно указать repeat с числом повторений и самим значением. Для адаптивных сеток с автоматическим количеством колонок пригождается связка auto-fill или auto-fit с minmax.
Элементы внутри грид-контейнера можно позиционировать не только по порядку, но и явно указывая, в какую строку и колонку они должны попасть, через grid-column и grid-row. Это позволяет одному элементу занимать сразу несколько ячеек сетки, что особенно удобно для выделения главного баннера среди карточек одинакового размера.
Именованные области сетки через grid-template-areas — ещё одна сильная сторона Grid: можно буквально нарисовать текстом, где на странице находится шапка, основной контент, боковая колонка и подвал, и это будет читаться почти как схема макета прямо в коде стилей.
Grid и Flexbox прекрасно уживаются в одном проекте — сеткой часто размечают крупные разделы страницы целиком, а внутри отдельных карточек или элементов навигации используют Flexbox для более локального выравнивания содержимого.
Подробный разбор всех свойств Grid и практические примеры сеток разной сложности собраны в руководстве по CSS Grid на MDN, а потренироваться можно на CSS Grid Garden.
