CSS Grid Layout

Часть 1.  

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

Определение.

Грид представляет собой пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк.

Особенности: 

1. Фиксированные и гибкие размеры полос.

Вы можете создать грид с фиксированными размерами полоc, например используя пиксели. Это установит грид на определенный пиксель, соответствующим желаемому макету. Вы также можете создать грид с гибкими размерами, используя проценты или новую единицу измерения — «fr», разработанную для этой цели.

1. Расположение элемента.

Можно расположить элементы в определенном месте сетки, используя номера строк, заголовки или подключаясь к области сетки. Более того, эта сетка имеет алгоритм для управления размещением элементов, которые не имеют определенного места на сетке.

2.Создание дополнительных полос для хранения контента. 

Вы можете определить явную сетку с помощью грид-раскладки. Схема сетки достаточно гибкая, чтобы обеспечить возможность включения большего количества строк и столбцов, если это потребуется. Более того, возможность добавления «столько столбцов, сколько поместится в контейнере» включена в его характеристики.

3.Управление выравниванием.

Грид содержит механизм выравнивания, таким образом мы можем контролировать, как элементы выравниваются после размещения в области сетки и как выравнивается вся сетка.

4.Управление перекрывающийся контентом. 

В ячейку или область грида может быть помещено несколько элементов; эти элементы могут частично перекрывать друг друга. Такое наложение можно контролировать с помощью свойства z-index .

Основные термины. 

Грид-контейнер: родительский элемент, к которому применяется свойство display:grid. 

Грид-элемент: дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.

Грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда). 

Располагается по обе стороны от колонки или ряда. Используется для привязки грид-элементов.

Синяя линия — грид-линия колонки.

Грид-ячейка: пространство между соседними грид-линиями. Единица грид-сетки.

Грид-ячейка — между первой и второй грид-линиями ряда и второй и третьей грид-линиями колонки.

Грид-полоса: пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке.

Горизонтальная грид-полоса между первой и второй грид-линиями ряда.

Грид-область: область, ограниченная четырьмя грид-линиями. Может состоять из любого количества ячеек как по горизонтали, так и по вертикали.

Грид-область между первой и третьей грид-линиями ряда и первой и второй грид-линиями колонки.

Основные грид свойства разберем во второй части.