Обзорная статья по CSS Grid
Красным показаны горизонтальные линии 1 и 2, в синим вертикальные 2 и 3:
По аналогии с прошлым примером, красным выделена горизонтальная дорожка №3, а синим вертикальная тоже №3.
Ячейка, это любая клетка ограниченная двумя линиями.
Область, это несколько ячеек образующих прямоугольник.
Управление расположением
Для создания сетки нужно условность свойство display в grid или inline-grid.
Далее нужно указать как должна формироваться структура сетки, для этого используются свойства grid-template-columns и grid-auto-rows.
Их синтаксис довольно прост, рассмотрим его на примере колонок.
Допустим, нам требуется сделать две колонки, у которых первая примерно в два раза больше второй. Тогда нужно перечислить ширину каждой ячейки по очереди:
grid-template-columns: 70% 30%;
— и все, третий элемент автоматически будет перенесен на новую строку.
Специально для сеток css grid появилась новая единица измерения fr (фракция), по своей сути она похожа на проценты, но позволяет более красиво задать отношения между шириной или высотой ячеек.
Если нам, как и в прошлом примере, требуется чтобы одна колонка была в два раза больше второй, то записывается это просто:
grid-template-columns: 2fr 1fr;
Если нам нужно, чтобы первая колонка была маленькой, второй большой и последняя средней, то можно задать такое соотношение:
grid-template-columns: 1fr 3fr 2fr;
Учитывая, что может потребоваться, например, 12 ячеек одинакового размера, то можно использовать функцию повтора. Также ее можно комбинировать с обычными единицами, скажем, если 13 колонка должна быть 50 пикселей:
grid-template-columns: repeat(12, 1fr) 50px;
Также есть функция, позволяющая задать размер ячейки в зависимости от его контента, но не меньше переданного занчения:
grid-template-columns: 1fr fit-content(400px) 1fr;
И еще, не менее удобной и полезной функцией, является minmax, она позволяет задать минимальный и максимальный размер ячейки:
grid-auto-rows: minmax(150px, auto);
Со строками все тоже самое, но стоит обратить внимание на термин «Неявная сетка«.
Проще его понять на примере, допустим у нас задана ширина для двух колонок и высота для 3 рядов:
grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr);
тогда первые 6 ячеек будут расположены как указано, но что будет с 7 и последующими?
Они пойдут новым и рядами, но их высота будет выставлена в auto (значение по умолчанию) и как раз они будут считаться как элементы неявной сетки.
Это далеко не всегда удобно, поэтому существует свойство grid-auto-rows, оно позволяет выставить значения таким элементам сетки.
Пример общего кода:
.grid < display: grid; /* grid-template-columns: 70% 30%; grid-template-columns: 2fr 1fr; */ grid-template-columns: repeat(3, 1fr) 2fr; /* Высота всех блоков: grid-auto-rows: 150px; */ grid-auto-rows: minmax(150px, auto); >
Также можно ознакомиться с несколькими примерами, например, с тем, что можно внутри одной сетки расположить другую (вложенную) сетку или с тем, как ячейки могут накладываться друг на друга.
Grid template
Шаблоны сетки позволяют «визуально описать» какие области и как буду отображены на экране.
Допустим, нам нужно сделать заготовку для стандартного шаблона:
шапка — занимающая все пространство
контент и сайд бар — две неравных колонки занимающие всю строку
подвал — как и шапка, занимает все пространство
Для этого нужно задать ячейкам имена, через свойство grid-area:
.header
а затем описать как эти области будут выведены, используя grid-template-areas:
grid-template-areas: "header header" "main side" "footer footer" ;
.header < grid-area: header; >.footer < grid-area: footer; >.side < grid-area: side; >.main < grid-area: main; >.grid
Стоит отметить, что одна область может занимать не только несколько ячеек в ряду, но и несколько ячеек в колонке:
grid-template-areas: "header side" "main side" "footer footer" ;
но изогнуть область нельзя, она всегда должна оставаться прямоугольной.
Если же требуется оставить какие-то ячейки пустыми, то можно прописать в них любое несуществующее имя, например, none
Короткой записью для grid-template-areas и grid-template-columns, является grid-template:
.grid < display: grid; grid-template: "header side" "main side" "footer footer" / 2fr 1fr; >
Размещение ячеек и областей внутри сетки
grid-area позволяет задать с какой линии по какую будет занимать область.
grid-area, это короткая запись для свойств:
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
При этом стоит обратить внимание на порядок их перечисления:
grid-area: 1 / 2 / 3 / 4; grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;
Предположим, что нам нужно растянуть одну ячейку на всю ширину сетки:
Тогда мы можем явно задать с какой по какую линию колонок должна занимать область:
Другой вариант, можно задать на сколько линий нужно расшириться, для этого используется span:
Также стоит отметить, что необязательно конечная позиция должна быть больше начальной, пример вполне валидной записи:
Также есть еще одна отличная возможность — задавать имена определенным линиям:
.grid < display: grid; grid-template-columns: [col_start] 1fr 1fr 1fr [col_middle] 1fr 1fr 1fr [col_end]; grid-template-rows: [row_start] 1fr 1fr [row__middle] 1fr 1fr [row_end]; grid-gap: 1em; >.c0 < grid-column: col_start / col_end; >
Несколько примеров для наглядности.
Выравнивание и позиционирование
Ориентация сетки:
Свойство grid-auto-flow позволит указать как стоить таблицу (по аналогии со свойством flex-direction для flexbox).
- row — значение по умолчанию, новые ячейки заполняют каждую строку поочередно, добавляя новые строки по мере необходимости.
- column — соответственно, сначала заполняются строки.
- dense — алгоритм пытается распределить ячейки так, что бы они занимали минимальное место.
Выравнивание строк / столбцов:
justify-items — горизонтальное выравнивание столбцов сетки.
align-items — вертикальное выравнивание рядов сетки.
Также есть можно использовать place-items, для краткой записи:
place-items: "align-items justify-items";
Выравнивание отдельной ячейки:
justify-self — горизонтальное положение ячейки внутри сетки.
align-self — вертикальное положение.
place-items: "align-self justify-self";
Выравнивание контента внутри ячейки:
Внимание: учитывая, что свойство display: grid не наследуется, для самой ячейки его тоже нужно явно задать.
Свойства работают по аналогии:
justify-content
align-content
Если нужно разместить содержимое ячейки по центру, то можно использовать:
.grid > .c5
— тогда не требуется задавать display: grid
Отствупы:
Если нужно задать отступы между ячейками, что вместо margin стоит использовать grid-gap:
.grid
«Рецепты»
space-around
У Flexbox, из коробки, есть красивое поведение при использовании
justify-content: space-around;
У Grid такого же эффекта можно добиться так:
display: grid; grid-template-columns: repeat(4, 50px); justify-items: center; justify-content: space-around;
Основной момент, это ограничение ширины ячеек через grid-template-columns, без этого ячейки растягиваются (stretch) на всю ширину и justify-content: space-around; визуально ничего не меняет.
Разница между явными и неявными гридами
Grid Layout наконец-то дает нам возможность определять сетки в CSS и размещать элементы в ячейках сетки. Само по себе это здорово, но тот факт, что нам не нужно указывать каждую дорожку и нам не нужно размещать каждый элемент вручную, делает новый модуль еще лучше. Сетки достаточно гибкие, чтобы адаптироваться к своим элементам.
Все это обрабатывается так называемой явной и неявной сеткой.
Явные сетки
Мы можем определить фиксированное количество строк и дорожек, которые образуют сетку, используя свойства grid-template-rows , grid-template-columns и grid-template-areas . Эта определенная вручную сетка называется явной сеткой.
.grid
Повторение треков
Когда мы определяем grid-template-columns: 1fr 1fr 1fr 1fr; , мы получаем четыре вертикальных трека, каждая шириной 1fr . Мы можем автоматизировать это, используя такие обозначения grid-template-columns: repeat(4, 1fr); . Первый аргумент указывает количество повторов, второй — список треков, который повторяется это количество раз.
Трек — лист? Да, вы действительно можете повторять несколько треков.
Автоматический повтор треков
Обозначение повторения весьма полезно, но его можно автоматизировать еще больше. Вместо того чтобы устанавливать фиксированное число повторений мы можем использовать ключевые слова auto-fill и auto-fit .
Автозаполнение треков
Ключевое слово auto-fill создает так много треков , как вписываться в контейнер сетки, не вызывая его переполнение.
.grid
Обратите внимание, что repeat(auto-fill, 1fr); будет создана только одна дорожка, потому что одна дорожка с шириной 1fr , уже заполняющей весь контейнер сетки, является недопустимым объявлением (может быть, оно изменилось? Я не знаю).
Автоматическая подгонка треков
Ключевое слово auto-fit ведет себя так же, как auto-fill , за исключением того, что после размещения элемента сетки будет создавать только количество дорожек, которые необходимы.
.grid
В примере, используемом в этом разделе, сетка будет выглядеть одинаково с repeat(auto-fit, 100px); и repeat(4, 100px); . Разница видна, когда элементов сетки больше 4.
Если элементов больше, auto-fit создает больше столбцов.
С другой стороны, если в нотации повторения используется фиксированное количество вертикальных дорожек и количество элементов превышает это значение, добавляются дополнительные строки.
Я использовал grid-template-columns в приведенных выше примерах для удобства, но все правила применимы и к grid-template-rows .
.grid < display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-template-rows: repeat(auto-fill, 100px); grid-gap: 20px; height: 100%; >html, body
Неявные сетки
Если элементов сетки больше, чем ячеек в сетке, или когда элемент сетки размещается за пределами явной сетки, контейнер сетки автоматически создает дорожки сетки, добавляя линии сетки в сетку. Явная сетка вместе с этими дополнительными неявными дорожками и линиями образует так называемую неявную сетку.
.item:first-child < grid-column-start: -1; >.item:nth-child(2)
Ширина и высота неявных дорожек устанавливаются автоматически. Они достаточно велики, чтобы соответствовать размещенным элементам сетки, но это поведение по умолчанию можно изменить.
Определение размера неявных дорожек
Свойства grid-auto-rows и grid-auto-columns дают нам контроль над размером неявных дорожек.
.grid
Неявные дорожки теперь всегда будут иметь ширину 200px и высоту 60px , независимо от того, подходит ли элемент сетки или нет.
Вы можете сделать размер неявных дорожек более гибким, указав диапазон с помощью нотации minmax() .
.grid
Неявные дорожки теперь имеют ширину не менее 200 пикселей и высоту 60 пикселей, но будут расширяться, если этого требует контент.
Расширение сетки до начала
Неявные треки нельзя просто добавить в конец явной сетки. Также может случиться так, что явную сетку нужно расширить до начала.
.item:first-child < grid-row-end: 2; grid-row-start: span 2; >.item:nth-child(2)
Каждый элемент заканчивается на второй строке и занимает 2 ячейки (одну по вертикали, другую по горизонтали). Поскольку перед второй линией находится только одна ячейка, в сетку в начале каждой стороны добавляется еще одна неявная дорожка.
Автоматическое размещение
Как уже упоминалось, неявные треки также добавляются, если количество элементов превышает количество ячеек. По умолчанию алгоритм автоматического размещения размещает элементы, последовательно заполняя каждую строку, добавляя новые строки по мере необходимости. Мы можем указать, как автоматически размещенные элементы перетекают в сетку, используя свойство grid-auto-flow .
.grid
Вместо строк столбцы заполняются элементами и создаются дополнительные неявные столбцы.
Не определять явную сетку
В связи с тем, что можно автоматически определять размер ячеек с помощью, grid-auto-rows и grid-auto-columns не обязательно определять явную сетку.
.grid < display: grid; grid-auto-columns: minmax(60px, 200px); grid-auto-rows: 60px; grid-gap: 20px; >.item:first-child < grid-row: span 2; >.item:nth-child(2) < grid-column: 1 / span 2; >.item:nth-child(5)
Если полагаться исключительно на неявную сетку, то в сочетании с явным размещением может возникнуть путаница и трудность для понимания. В этом примере первый элемент размещается auto и занимает 2 строки, второй элемент размещается явно в первом столбце и занимает 2 столбца, образуя вторую вертикальную дорожку. Третий и четвертый элементы фактически будут автоматически помещены в четвертую строку, но пятый элемент будет явно помещен в ранее несуществующий третий столбец. Это создает третью вертикальную дорожку, и из-за автоматического размещения сетки третий элемент перемещается на строку вверх, заполняя пространство.
Заключение
Эта статья не охватывает всего, что нужно знать о явной и неявной сетке, но она должна дать вам больше, чем твердое понимание концепции. Знание того, почему и как создаются неявные линии и треки, жизненно важно для работы с Grid Layout.
Основные элементы сетки Grid
Grid — это мощная спецификация и в сочетании с другими частями CSS, такими как flexbox, может помочь вам создать макеты, которые ранее невозможно было построить в CSS.
Это двумерная система, то есть она может обрабатывать как столбцы, так и строки, в отличие от flexbox, который в значительной степени является одномерной системой. Вы работаете с макетом сетки, применяя правила CSS как к родительскому элементу (который становится контейнером сетки), так и к дочерним элементам этого элемента (которые становятся элементами сетки).
Flexbox и Grid на самом деле очень хорошо работают вместе
По состоянию на 2020 год все браузеры поддерживают CSS Grid — кроме говнобраузера!
Основные элементы сетки Grid:
Grid container — блок в котором находятся grid элементы. Внутри grid контейнера есть два набора grid линий: один определяет ось столбцов, другой определяет ось строк.
Grid Item — Дочерние элементы (то есть прямые потомки) контейнера сетки. Элементы item являются элементами сетки, а подэлемент (sub-item) — нет!.
Grid lines — Разделительные линии, составляющие структуру сетки. Они могут быть вертикальными («линии сетки столбцов») или горизонтальными («линии сетки столбцов») и находиться по обе стороны от строки или столбца. Здесь желтая линия является примером линии сетки столбца.
* Важный нюанс, данный элемент восприимчив к режиму написания, который используется на вашем ресурсе. Например, вы используете Арабский язык или любой другой язык у которого режим написания справа налево, то нумерация линий будет начинаться с правой стороны.
Grid cell — это наименьшая неделимая единица grid контейнера на которую можно ссылаться при позиционировании grid элементов. Образуется на пересечении grid строки и grid колонки.
Пространство между двумя соседними строками и двумя соседними линиями сетки столбцов. Это единый «блок» сетки. Вот ячейка сетки между линиями сетки строк 1 и 2 и линиями сетки столбцов 2 и 3.
Grid track — это пространство между двумя смежными grid линиями, вертикальными или горизонтальными. Вы можете думать о них как о столбцах или строках сетки. Вот дорожка сетки между линиями сетки второго и третьего рядов.
Grid area — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.
Общая площадь окружена четырьмя линиями сетки. Область сетки может состоять из любого количества ячеек сетки. Вот область сетки между линиями сетки строк 1 и 3 и линиями сетки столбцов 1 и 3.
===
Grid — один из самых мощных CSS-модулей, когда-либо представленных до 2020 года!
2.28. CSS Grid
W3C описывает модуль CSS Grid Layout как систему двумерного макета, оптимизированного для дизайна пользовательского интерфейса. Главная идея, лежащая в основе макета сетки, заключается в разделении веб-страницы на столбцы и строки. В образовавшиеся области сетки можно помещать элементы сетки, а управлять их размерами и расположением можно с помощью специальных свойств модуля.
Кроме того, благодаря своей способности явно размещать элементы в сетке, Grid Layout позволяет кардинально преобразовывать структуру визуального макета (отображаемого на экране), не требуя соответствующих изменений разметки.
Хотя многие макеты могут быть отображены с помощью Grid или Flexbox, у каждого есть свои особенности. Grid обеспечивает двухмерное выравнивание, использует нисходящий подход к макету, допускает явное перекрытие элементов и обладает более мощными связующими возможностями. Flexbox фокусируется на распределении пространства по оси, использует более простой восходящий подход к макету, может использовать систему переноса строк на основе размера контента для управления своей вторичной осью и опирается на базовую иерархию разметки для построения более сложных макетов.
Во всех примерах будет рассмотрен стандартный синтаксис. Если вы захотите адаптировать синтаксис для IE10-11 и Microsoft Edge, воспользуйтесь руководством Microsoft Developer Network Grid layout.
Список текущих багов и неполных реализаций приведен в статье Rachel Andrew GridBugs.
Руководство по CSS Grid Layout
- Содержание:
- 1. Концепция сетки и основные понятия
- 2. Создание контейнера-сетки: значения grid и inline-grid свойства display
- 3. Определение сетки
- 3.1. Как задать количество строк и столбцов: свойства grid-template-rows и grid-template-columns
- 3.2. Именованные области: свойство grid-template-areas
- 3.3. Сокращенная запись явного объявления сетки: свойство grid-template
- 3.4. Неявная сетка
- 3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns
- 3.4.2. Автоматическое размещение: свойство grid-auto-flow
- 3.5. Сокращенная запись сетки: свойство grid
- 4. Элементы сетки
- 5. Размещение и переупорядочивание элементов сетки
- 5.1. Размещение с помощью линий сетки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end
- 5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area
- 6. Выравнивание элементов сетки и промежутки между элементами
- 6.4. Промежутки между элементами сетки: свойства row-gap, column-gap и gap
Поддержка браузерами
IE: 10.0 -ms-
Edge: 16.0, 12.0 -ms-
Firefox: 52.0
Chrome: 57.0
Safari: 10.1
Opera: 44.0
iOS Safari: 10.3
Opera Mini: —
Android Browser: 67.0
Chrome for Android: 70.0
1. Концепция сетки и основные понятия
Сетка (grid) представляет собой набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки.
Линии сетки (grid lines) — это невидимые горизонтальные и вертикальные разделительные линии, они существуют по обе стороны от строки и столбца. На них можно ссылаться по числовому индексу (используя свойства grid-column-start , grid-column-end , grid-row-start и grid-row-end ) или имени, заданному в CSS-коде. Числовые индексы сетки зависят от стиля языка, поэтому первым столбцом может быть как самый левый, так и самый правый столбец.
Выделяют две группы линий сетки: одна группа определяет столбцы, которые проходят вдоль оси блока (ось столбцов), и перпендикулярная группа, определяющая строки, простирающиеся вдоль линейной оси (ось строк), в соответствии с CSS3 режимом записи.
Дорожка сетки (grid track) — пространство между двумя соседними линиями сетки, используется для определения либо столбца, либо строки сетки. Дорожка идет от одного края контейнера к другому, размер зависит от расположения линий сетки, которые ее определяют. Дорожки сетки аналогичны столбцам и строкам таблицы. По умолчанию смежные дорожки плотно прилегают друг к другу, задать расстояние между ними можно с помощью свойств row-gap , column-gap и gap .
Ячейка сетки (grid cell) — пространство, ограниченное четырьмя линиями сетки, аналогично ячейке таблицы. Ячейка сетки — это область, в которой можно разместить контент. Это наименьшая единица сетки, на которую можно ссылаться при позиционировании элементов сетки. К ячейкам сетки нельзя обращаться напрямую с помощью CSS-свойств.
Область сетки (grid area) — прямоугольная область, ограниченная четырьмя линиями сетки и состоящая из одной или нескольких соседних ячеек. Область может быть такой же маленькой, как одна ячейка, или такой же большой, как все ячейки сетки. Область сетки может быть задана явно с помощью свойства grid-template-areas , по умолчанию на нее ссылаются ограничивающие линии сетки.
Элементы сетки (grid items) — отдельные элементы, которые назначаются области сетки (или ячейке сетки). Каждый контейнер-сетка включает ноль и более элементов сетки; каждый дочерний элемент контейнера-сетки автоматически становится элементом сетки.
Дорожки, ячейки и области сетки построены из линий сетки. Тем не менее не требуется, чтобы все области сетки были заполнены элементами, вполне возможно, что некоторые или даже большинство ячеек сетки будут пустыми от любого содержимого. Также возможно, что элементы сетки будут перекрывать друг друга, либо определять перекрывающиеся области сетки.
2. Создание контейнера-сетки: значения grid и inline-grid свойства display
Для создания макета на основе сетки необходимо определить контейнер-сетку.
Контейнер-сетка (grid container) — это блок, который устанавливает контекст форматирования по типу сетки, то есть создает область с сеткой, а дочерние элементы располагаются в соответствии с правилами компоновки сетки, а не блочной компоновки. Когда вы определяете контейнер сетки с помощью display: grid или display: inline-grid , вы создаете новый контекст форматирования для содержимого этого контейнера, который влияет только на дочерние элементы сетки.
.grid-container < display: grid; grid-template-areas: "post-1 post-1 post-2" "post-1 post-1 post-3" "post-6 post-5 post-4"; grid-template-rows: repeat(3, 200px); grid-template-columns: repeat(3, 1fr); >.post-1 < grid-area: post-1; >.post-2 < grid-area: post-2; >.post-3 < grid-area: post-3; >.post-4 < grid-area: post-4; >.post-5 < grid-area: post-5; >.post-6
3.3. Сокращенная запись явного объявления сетки: свойство grid-template
Свойство grid-template является сокращением для установки свойств grid-template-rows , grid-template-columns и grid-template-areas в одном объявлении.
Свойство не наследуется.
| grid-template | |
|---|---|
| Значения: | |
| none | Устанавливает для всех трех свойств начальные значения none . |
| значение grid-template-rows / grid-template-columns | Устанавливает grid-template-rows и значение grid-template-columns в указанные значения, а grid-template-areas в значение none . |
| имена линий сетки или последовательность идентификаторов, заключенная в кавычки и размер дорожки или именованные линии сетки или + /явный список дорожек | Устанавливает grid-template-areas для перечисленных последовательностей идентификаторов. Устанавливает для grid-template-rows указанные значения размеров дорожек, следующие за каждой последовательностью идентификаторов (выставляя auto для любых отсутствующих размеров), и объединяет в именованных линиях сетки, определенных до / после каждого размера. Устанавливает grid-template-columns в список дорожек, указанный после косой черты (или ни одного, если не указан). |
.grid-container < display: grid; grid-template: repeat(3, 200px)/repeat(3, 1fr); >.post-1 < grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; >.post-2 < grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 4; >. .grid-container < display: grid; grid-template: [start] "post-1 post-1 post-2" 200px [row2] [row2] "post-1 post-1 post-3" 200px [row3] [row3] "post-6 post-5 post-4" 200px [row-end] / 1fr 1fr 1fr; >.post-1 < grid-area: post-1; >.post-2 < grid-area: post-2; >. Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована).
3.4. Неявная сетка
3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns
Если элемент сетки расположен в строке или столбце, размер которых не определен явно grid-template-rows или grid-template-columns , создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки.
По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее.
Свойства не наследуются.
| grid-auto-columns, grid-auto-rows | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию. |
| размер дорожки + | В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки. |
.grid-container < max-width: 710px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,100px); grid-auto-rows: 50px; >.post-1 < grid-column: 1/3; grid-row: 1/3; >.post-2 < grid-column: 3; grid-row: 1; >.post-3 < grid-column: 3; grid-row: 2; >.post-4 < grid-column: 3; grid-row: 3; >.post-5 < grid-column: 2; grid-row: 3; >.post-6
3.4.2. Автоматическое размещение: свойство grid-auto-flow
Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения. Свойство grid-auto-flow управляет автоматическим размещением элементов сетки без явного положения. После заполнения явной сетки (или если явной сетки нет) автоматическое размещение также приведет к генерации неявных дорожек сетки.
Свойство не наследуется.
| grid-auto-flow | |
|---|---|
| Значения: | |
| row | Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию. |
| column | Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости. |
| dense | Алгоритм «плотной» укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами. |
Свойство будет полезным при создании компактных галерей, если для изображений не задан порядок, в котором они должны быть расположены. Для каждого элемента сетки браузер сканирует всю сетку в заданном направлении потока (строка или столбец), начиная от начальной точки потока (верхний левый угол, на языках LTR — слева направо), пока не найдет место, куда поместится этот элемент сетки.
.grid-container < max-width: 710px; margin: 10px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-auto-flow: dense; >.item5 < grid-column: span 2; grid-row: span 2; >.item6
3.5. Сокращенная запись сетки: свойство grid
Свойство grid задает все явные grid-template-rows , grid-template-columns и grid-template-areas и все неявные свойства сетки grid-auto-flow , grid-auto-rows и grid-auto-columns в одном объявлении. Оно не сбрасывает свойства row-gap / column-gap . Его синтаксис соответствует grid-template , а также дополнительной синтаксической форме для определения автоматического размещения элементов сетки:
Путем явного задания дорожек на одной оси (устанавливая grid-template-rows или grid-template-columns и задавая другим значение none ), и задавая, как автоматически повторять дорожки на другой оси (устанавливая grid-auto-rows или grid-auto-columns и задавая другим auto ).
Для grid-auto-flow также устанавливается одно из трех допустимых значений. Все остальные подсвойства grid сбрасываются к своим начальным значениям.
/* значения для grid-template */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); /* значения для grid-template-rows / [auto-flow && dense? ] grid-auto-columns? */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* значения для [ auto-flow && dense? ] grid-auto-rows? / grid-template-columns */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content);4. Элементы сетки
Контейнер-сетка устанавливает новый контекст форматирования для элементов сетки, который обуславливает следующие особенности:
- Для элементов сетки блокируется их значение свойства display . Значение display: inline-block вычисляется в display: block , анонимные блоки текста также занимают всю ширину контейнера и образуют разрыв строки.
- Размер элемента сетки в пределах содержащего блока определяется его областью сетки.
- Расчеты элементов сетки для width: auto и height: auto зависят от их значений align-self :
align-self: normal; — незамещаемые элементы заполняют область сетки, замещаемые элементы используют собственные размеры;
align-self: stretch; — обе категории элементов заполняют область сетки;
align-self: start/center и т.д. — незамещаемые элементы устанавливают размеры в соответствии со своим содержимым, замещаемые элементы используют собственные размеры. - Поскольку соседние элементы сетки находятся в независимых областях сетки, то поля соседних элементов сетки margin не схлопываются.
- Браузеры по-разному обрабатывают процентные значения свойств margin и padding , поэтому не рекомендуется использовать их при задании значений этих свойств.
- Поля margin: auto; расширяются, поглощая свободное пространство в соответствующем измерении, поэтому могут использоваться для выравнивания элемента.
5. Размещение и переупорядочивание элементов сетки
Свойства размещения позволяют свободно упорядочивать и переупорядочивать содержимое сетки таким образом, что визуальное представление может значительно отличаться от порядка элементов в html-документе.
5.1. Размещение с помощью линий сетки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end
Каждый элемент сетки связан с областью сетки, которая определяет содержащий блок для элемента сетки. Положение элементов сетки определяется расположением линий сетки и диапазоном сетки — количеством занимаемых дорожек сетки. По умолчанию элемент сетки занимает одну дорожку на каждой оси. Поэтому можно опустить значение grid-column-end или grid-row-end .
Свойства размещения на сетке — grid-row-start , grid-row-end , grid-column-start и grid-column-end и их краткая запись grid-row , grid-column и grid-area позволяют определить размещение элемента сетки, предоставив любую (или ноль) из следующих шести частей информации:
| Строка | Столбец | |
|---|---|---|
| Начало | Начальная линия строки | Начальная линия столбца |
| Конец | Конечная линия строки | Конечная линия столбца |
| Диапазон | Диапазон строк | Диапазон столбцов |
| grid-row-start, grid-column-start, grid-row-end, grid-column-end | |
|---|---|
| Значения: | |
| auto | Свойство не влияет на размещение элемента сетки, указывая на автоматическое размещение или диапазон по умолчанию, равный единице. |
| имя линии | Начальная и конечная линия строки/столбца задаются в именованных линий сетки. |
| целое число и имя линии? | Начальная и конечная линия строки/столбца задаются с помощью целого числа (отрицательное порядковый номер линии сетки будет отсчитываться с противоположного края явной сетки) и (необязательно) имени линии. |
| span и целое число или имя линии | Ключевое слово span и целое положительное число/имя линии задают диапазон ячеек для размещения элемента сетки. |
.grid-container < display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 1fr 1fr 1fr; >.post-1 < grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; >.post-2 < grid-row-start: 1; grid-column-start: 3; >.post-3 < grid-row-start: 2; grid-column-start: 3; >.post-4 < grid-row-start: 3; grid-column-start: 3; >.post-5 < grid-row-start: 3; grid-column-start: 2; >.post-6
5.1.1. Именованные линии сетки
Хотя на линии сетки можно ссылаться по их числовому индексу, именованные линии облегчают понимание и использование свойств размещения сетки. Линии могут быть названы явно в свойствах grid-template-rows и grid-template-columns или неявно путем создания именованных областей сетки в свойстве grid-template-areas .
Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. В качестве имени линии нельзя использовать слово span .
.grid-container < display: grid; grid-template-rows: [start] 200px [row2] 200px [row3] 200px [row-end]; grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end]; >.post-1 < grid-row-start: span 2; grid-column-start: span 2; >.post-2 < grid-row-start: start; grid-column-start: col3; >.post-3 < grid-row-start: row2; grid-column-start: col3; >.post-4 < grid-row-start: row3; grid-column-start: col3; >.post-5 < grid-row-start: row3; grid-column-start: col2; >.post-6
Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas , принимая вид name-start и name-end . Имена линий сетки никогда не заменяют другие имена линий сетки. Вместо этого они просто накапливаются.
5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area
Свойства grid-row и grid-column являются сокращенными именами для свойств grid-row-start / grid-row-end и grid-column-start / grid-column-end соответственно.
Если заданы два значения, первое (до косой черты) устанавливается для параметра grid-row-start/grid-column-start , второе — для grid-row-end/grid-column-end . Если второе значение опущено, а первое указано в формате пользовательского идентификатора, то grid-row-end/grid-column-end также устанавливается в пользовательское имя сетки. В противном случае, оно вычисляется в auto .
Для свойства grid-area если указано четыре значения, первое устанавливается для grid-row-start , второе — для grid-column-start , третье — для grid-row-end , четвертое — для grid-column-end .
Если grid-column-end/grid-row-end не указан, а grid-column-start/grid-row-start указан в форме пользовательского имени, то для grid-column-end/grid-row-end также устанавливается значение пользовательского имени линии; в противном случае он установлен на auto .
Когда grid-column-start опущен, а значение grid-row-start указан в форме пользовательского имени, оно устанавливается для всех четырех значений. В противном случае оно устанавливается на auto .
| grid-area | |||
| grid-row | grid-column | ||
| grid-row-start | grid-row-end | grid-column-start | grid-column-end |
grid-row: a; grid-row: auto; grid-column: 2; grid-row: 1 / -1; grid-column: sidebar-start / footer-end;grid-area: a; grid-area: auto; grid-area: 2 / 4; grid-area: 1 / 3 / -1; grid-area: header-start / sidebar-start / footer-end / sidebar-start;5.3. Переупорядочивание элементов сетки
Свойство order также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, а не логического переупорядочения контента.
6. Выравнивание элементов сетки и промежутки между элементами
Для выравнивания элементов сетки можно использовать свойство margin , аналогично, как работает это свойство для блочных элементов.
По умолчанию элементы сетки растягиваются, чтобы заполнить свою область сетки. Тем не менее, если justify-self или align-self вычисляют значение, отличное от stretch или задано margin: auto , элементы сетки будут автоматически изменяться в соответствии с их содержимым.
6.1. Выравнивание с помощью margin: auto
При расчете размеров дорожек сетки margin: auto обрабатываются как 0 . Они поглощают положительное свободное пространство, предшествующее выравниванием с помощью свойств выравнивания. Переполняющиеся элементы игнорируют свои автоматические поля и переполнение, как указано в их свойствах выравнивания блоков.
6.2. Выравнивание по оси строки
Элементы сетки могут быть выровнены в направлении оси строки (по горизонтали для LTR-языков) с помощью свойства justify-self или свойства justify-items (заданного для контейнера-сетки).
6.3. Выравнивание по оси столбца
Элементы сетки могут выровнены в направлении, перпендикулярном оси строки с помощью свойства align-self или свойства align-items , заданного для контейнера-сетки.
6.4. Промежутки между элементами сетки: свойства row-gap, column-gap и gap
Свойства row-gap и column-gap (и их сокращенная запись gap ), если они указаны в контейнере сетки, определяют промежутки между строками и столбцами сетки. При определении размера дорожки каждый промежуток рассматривается как дополнительная пустая дорожка указанного размера. Дополнительный промежуток также может быть добавлен между дорожками за счет свойств justify-content и align-content .
Промежутки добавляются только между двумя дорожками сетки, то есть они не добавляются перед первой и после последней дорожки.
Свойства не наследуются.
| row-gap, column-gap | |
|---|---|
| Значения: | |
| normal | Вычисляется как 0px . Значение по умолчанию. |
| длина или % | Процентное значение вычисляется относительно размеров области сетки. Отрицательные значения не используются. |
row-gap: 1.5em; column-gap: 10px; gap: 1%;