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 указать нужный порядок.

Основные свойства CSS Grid Layout

Контейнер

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • justify-items
  • align-items
  • justify-content
  • align-content
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid

Дочерние элементы

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self
  • align-self

Примеры

Основы

Единица измерения fr

В дальнейшем я буду добавлять материалы по этой теме.

Дополнительные материалы

CSS Grid Layout Module Level 1

Примеры разметок

Реклама