CSS Grid Layout

В марте 2017 года браузеры Firefox 52 и Chrome 57 стали официально поддерживать новую разметку - сетку CSS Grid Layout.

Можно считать новую сетку как Таблицы 2.0. В своё время вёрстка таблицами была очень популярна, но неудобна. С гридами вы сможете выстроить разметку практически как вам угодно. Можно поставить последний элемент в коде визуально в начало, например. Можно поменять пару дополнительных элементов страницы местами. Вы указываете их в каком нужно порядке, а потом отображаете как нужно.

Благодаря CSS-трансформациям, контурам обрезки, обтеканию сложных форм и многому другому, вам не обязательно втискивать всё в строгие рамки сетки.

Но есть и ограничения. Нельзя напрямую задавать стиль ячейке или области грида: вам придется поставить туда какой-либо элемент из разметки и задать стили ему. Все ячейки и области гридов должны быть прямоугольными — нельзя сделать область в виде буквы Г, например. Зазоры (отступы) между ячейками могут быть только одного размера по каждой оси, совсем как border-spacing в табличных стилях.

Начало работы

Для начала следует определить контейнер как сетку при помощи display: grid, затем установить размеры рядов и столбцов при помощи grid-template-columns и grid-template-rows. Затем нужно разместить дочерние элементы в сетке при помощи grid-column и grid-row. Порядок размещения не важен, как в Flexbox, вы сможете через CSS указать нужный порядок.