CSS Grid Layout — новая и мощная система построения макета окна браузера, позволяющая с лёгкостью разделить веб-страницу на столбцы и строки.
Главным отличием Grid от Flexbox является количество измерений (осей). При работе только с последним вам придётся выбирать между осью X и осью Y. Иначе говоря, Flexbox может быть направлен на создание только колонок или только строк.
Однако эти инструменты не конкурируют друг с другом, поэтому можно применять их вместе.
Сегодня большинство браузеров поддерживает Grid. Но Grid новее, чем FlexBox (Bootstrap подерживает FlexBox) , поэтому при использовании GRID больше вероятность того, что возникнут проблемы с совместимостью браузеров. Возможно, какие-то версии браузеров не поддерживают все свойства Grid или поддерживают частично.
Планирование макета начинается с контейнера. Контейнер задаёт сетку - разбиение экрана. Сетка состоит из ячеек (пересечение рада и колонки) и разделительных линий между ячейками.
Контейнер - основа макета. Есть корневой - главный, родительский контейнер. В его ячейки могут быть, в свою очередь, вложены другие элементы - контейнеры.
Элемент-контейнер описывается свойством display: grid (контейнер - блочный элемент) или display:inline-grid (контейнер - строчный элемент).
Количество, размер ячеек внутри контейнера может быть определено автоматически или задано вручную.
Дочерний элемент контейнера. Элемент, расположенный определённым образом на сетке-макете, которую задал контейнер. Элементы на сетке можно расположить произвольным образом. Автоматически или вручную. В одной или нескольких ячейках. Задать координаты начала и конца элемента по клеткам или по (поименованным или пронумерованным) разделительным линиям, расположенным между ячейками.
Определим один контейнер (#container0) с дочерними элементами (.items1) - колонками автоматического размера и автоматического расположения, с промежутками между ними - 2 px.
Зададим расположение дочерних элементов - по колонкам.
Определим вручную ряды для размещения дочерних элементов (grid-template-rows). Зададим высоту каждого ряда в px.
Разобьём контейнер на 15 ячеек: 5 колонок и 3 ряда.
Дочерние элементы распределились по ячейкам. Так как элементов меньше, чем ячеек. то в сетке остались незаполненные ячейки.
Использованные директивы
можно переписать, используя CSS grid функцию repeat() в виде:
Добавим стили к первому и последнему дочерним элементам (first-child, last-child), которые заставят элементы занять 5 колонок (целый ряд) в первом и третьем рядах соответственно.
Для задания размеров ячеек макета (CSS grids), расстояний между ними можно использовать различные единицы ихмерения.
Это могут быть как стандартные для CSS 3 единицы (px, %, em, ...) так и новая единица измерения - fr (fractions).
В примере ниже, внутри контейнера element, колонки распределяются равномерно по ширине окна, причём соотношение их ширины - 1:3:1 , высота рядов задаётся для первого (60px ) и последнего ряда (5em), высота среднего ряда автоматически вычисляется, в соответствии с контентом.
Единицы измерения - fr и % похожи. Например, 2 директивы: grid-template-columns: 50% 50%; и grid-template-columns:1fr 1fr; приводят к одинаковым результатам (когда используются только % или только fr ).
В том случае, когда эти (относительные) единицы измерения используются совместно с другими (такими как px , em), результаты разные.
Директива
grid-template-columns: 100px 50% 50%;
создаст одну колонку 100px и 2 шириной 50% от ширины контейнера (общая ширина = 100% + 100px)
Директива
grid-template-columns: 100px 1fr 1fr;
создаст колонку 100px, поделит оставшуюся ширину на 2 и создаст ещё 2 колонки равной ширины. (общая ширина колонок - 100% от контейнера)
В дополнение к тому, что дочерние элементы (grid items) можно размещать по ячейкам сетки (например: grid-column-start: 2;grid-row-start: 2;), можно создавать на сетке поименованные области и размещать контент в них.
Область можно создать директивой:
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |area_name;
Где:
grid-row-start - ряд, в котором область начинается
grid-column-start колонка, в которой область начинается
grid-row-end - ряд - конец области
grid-column-end - колонка - конец области
area_name - имя области
Тогда можно разместить элемент в контейнере в этой области, указав для него:
grid-area: area_name;
Например:
index.html
style.css
Для автоматического разбиения grid - контейнера на ячейки, используются CSS свойства:
grid-auto-columns - определяет размеры автоматически создаваемых колонок
grid-auto-rows - размеры автоматически создаваемых рядов
grid-auto-flow -
Для задания размеров ячейки контейнера могут использоваться:
Размер (px, em) - положительное число. Проценты (%) - положительное число. Fractures - положительное число, с единицей измерения - fr. Функция minmax(min, max), которая позволяет задать минимальное и максимальное значение для размера элемента. Ключевое слово auto, которое определяет автоматическое вычисление размеров.
Пример:
Стиль для контейнера
задаёт алгоритм, по которому в окне браузера будут, при необходимости, организовываться ячейки для дочерних элементов.Согласно этому алгоритму, колонки для ячеек займут всю ширину экрана (если нужна будет одна колонка, то шириной 100%, четыре колонки - по 25%), а каждый ряд будет высотой 100px.
Реальные позиции ячеек в такой структуре будут определяться необходимым количеством ячеек в контейнере и их стилями.Зададим HTML шаблон документа (index.html):
Стили для этого примера:
Директива:grid-column: 1 / 5; задаёт, что элемент () должен занять в контейнере колонки с номера 1 по номер 5, что приводит к автоматическому созданию этих колонок по алгоритмуgrid-auto-columns: 1fr; - то есть одинакого размера, равномерно распределённых по ширине экрана.
Всего в HTML щаблоне описано 11 дочерних эдементов (.item1) в контейнере (.wrapper ). Все они размещены последовательно в созданной сетке.
Если задать для последнего элемента (:last-child) область его размещения, предусматривающую, 2 ряда? начиная с третьего (grid-row: 3 / span 2;), то размещение элементов в контейнере изменится..item1:last-child {grid-row: 3 / span 2;background-color: red;}
HTML структура макета GRID состоит из трёх уровней, на которых элементы могут быть отцентрованы (выравнены): GRID - container (элемент, с заданным свойством display: grid;), GRID-item (дочерний элемент grid- контейнера), GRID-content (содержимое элемента ).
При работе с шаблоном grid есть две оси для выравнивания объектов: горизонтальная (inline ) и вертикальная (block).
Для выравнивания GRID-элементов (GRID items) по вертикальной оси используются свойства CSS:align-self и align-items.
Для выравнивания по горизонтальной оси - justify-items и justify-self.
Эти свойства могут принимать значения:
Для GRID-контейнера используются свойства:
align-items:
justify-items:
Для дочерних элементов
justify-self:
align-self: