Grid Layout - это новая модель макета для CSS, которая обладает мощными способностями контролировать размеры и расположение блоков и их содержимого. В отличие от гибкого макета коробки , который ориентирован на одну ось, сеточный макет оптимизирован для двухмерных макетов: тех, в которых выравнивание содержимого желательно в обоих измерениях.
Кроме того, благодаря своей способности явно размещать элементы в сетке, Grid Layout позволяет кардинально преобразовывать структуру визуального макета, не требуя соответствующих изменений разметки. Комбинируя медиазапросы со свойствами CSS, которые управляют макетом контейнера сетки и его дочерних элементов, авторы могут адаптировать свой макет к изменениям форм-факторов устройства, ориентации и доступного пространства, сохраняя при этом более идеальную семантическую структуру своего контента в презентациях.
Хотя многие макеты могут быть выражены с помощью Grid или Flexbox, у каждого есть свои особенности. Сетка обеспечивает двухмерное выравнивание, использует нисходящий подход к макету, допускает явное наложение элементов и обладает более мощными связующими возможностями. Flexbox фокусируется на распределении пространства по оси, использует более простой восходящий подход к макету, может использовать систему переноса строк на основе размера содержимого для управления своей вторичной осью и опирается на базовую иерархию разметки для создания более сложных макетов. Ожидается, что оба будут полезными и дополнительными инструментами для авторов CSS.