Какие css свойства являются свойствами grid контейнера

Основные понятия Grid Layout

CSS Grid Layout представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается CSS Grid Layout ) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.

Что такое Grid?

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

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

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

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

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

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

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

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

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

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

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

Grid — это мощная спецификация и в сочетании с другими частями CSS, такими как flexbox, может помочь вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем grid контейнере.

Grid контейнер

Мы создаём grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

В этом примере есть div, содержащий класс wrapper с пятью потомками

Сделаем wrapper grid контейнером

Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть Grid Inspector, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.

Using the Grid Highlighter in DevTools to view a grid

По мере вашего обучения и последующей работы с CSS Grid Layout этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашей сеткой.

Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.

Grid Tracks

Мы определяем ряды и столбцы в нашей сетке при помощи свойств grid-template-columns и grid-template-rows . Это определяет полосы сетки. Полоса сетки — это место между любыми двумя линиями сетки. На изображении ниже вы можете увидеть подсветку полосы — первого трека ряда в нашей сетке.

Можно дополнить пример выше, добавив свойство grid-template-columns и задав размеры полос колонок.

В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.

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

Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины fr представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.

В следующем примере мы создаём грид с треком в 2fr и двумя треками по 1fr . Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части — два оставшихся.

В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.

Задание треков с помощью нотации repeat()

В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить структуру треков или её часть. Например, такое задание грида:

можно записать вот так:

Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr , и все это дело повторяется пять раз.

Явный и неявный грид

Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства grid-template-columns , в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью grid-template-columns и grid-template-rows . Если вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.

Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств grid-auto-rows (en-US) и grid-auto-columns (en-US) .

В примере ниже мы задаём grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

Масштабирование треков и minmax()

При задании размеров явного грида или при определении размеров автоматически создаваемых колонок или строк может возникнуть следующая ситуация: мы хотим определить для треков минимальный размер, но при этом быть уверенными, что при необходимости треки растянутся, чтобы вместить весь добавленный в них контент. Например, нам нужно, чтобы строки никогда не становились меньше 100 пикселей, но если контент занимает, скажем, 300 пикселей в высоту, мы хотим, чтобы строка тоже стала 300 пикселей.

Для подобных ситуаций в Grid предусмотрено решение с помощью функции minmax() . В следующем примере minmax() используется, как значение свойства grid-auto-rows (en-US) . Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение auto . Использование auto означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке.

Grid-линии

Нужно заметить, что когда мы определяем грид, мы определяем грид-треки, а не грид-линии. После этого грид обеспечивает нас пронумерованными линиями, номера которых можно использовать для размещения элементов. Например, в гриде с тремя колонками и двумя рядами у нас — четыре колоночные линии.

Diagram showing numbered grid lines.

Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 — самая левая линия в гриде. В языках с написанием справа-налево, линия 1 — самая правая линия в гриде. Линиям также можно давать имена, и — не переключайтесь, дальше мы узнаем, как это делать.

Размещение элементов по линиям

В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек.

В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств grid-column-start (en-US) , grid-column-end (en-US) , grid-row-start и grid-row-end (en-US) . Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае — самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека — со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида.

Не забывайте, что вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.

Grid-ячейки

Грид-ячейка (grid cell) — наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

The first cell of the grid highlighted

Grid-области

Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создаёт грид-область (grid area). Грид-области должны быть перпендикулярными, — невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных.

A grid area

Зазоры (Gutters)

Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств grid-column-gap (en-US) и grid-row-gap (en-US) , или с помощью сокращённого свойства grid-gap (en-US) . В примере ниже мы создаём зазор в 10 пикселей между колонками и в 1em между строками.

Любое пространство, которое занимают зазоры, добавляется в начало эластичных треков, задаваемых с помощью fr , поэтому зазоры используются для регулирования размеров и действуют как регулярные грид-треки, хотя что-то разместить в них нельзя. В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой грид-линии была добавлена толщина.

Вложенные гриды

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

Nested grid in flow

Если мы задаём для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства grid-gap (en-US) родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

Подгрид (Subgrid)

В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.

Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.

В приведённом выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr) , на grid-template-columns: subgrid . Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

Размещение элементов с помощью z-index

Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:

Элемент box2 теперь перекрывает box1 , и отображается сверху, поскольку в исходном коде находится ниже.

Управление порядком отображения

Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства z-index — точно так же, как в случае с позиционированными элементами. Если задать box2 значение z-index , меньшее, чем у box1 , в стеке он отобразится под элементом box1 .

Что дальше?

В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите к следующей части нашего гида, где мы детально покопаемся в недрах CSS Grid Layout.

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

  • Содержание:
Поддержка браузерами

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. Концепция сетки и основные понятия

Рис. 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 container) — это блок, который устанавливает контекст форматирования по типу сетки, то есть создает область с сеткой, а дочерние элементы располагаются в соответствии с правилами компоновки сетки, а не блочной компоновки. Когда вы определяете контейнер сетки с помощью display: grid или display: inline-grid , вы создаете новый контекст форматирования для содержимого этого контейнера, который влияет только на дочерние элементы сетки.

Donec in tellus vel neque sollicitudin lobortis sed a arcu. Quisque eu arcu vel eros pretium posuere. Quisque semper nunc ligula, eget laoreet nibh faucibus vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra lorem libero, eget ultricies risus vulputate eu. Donec pretium in risus a suscipit.

Контейнер-сетка бывает двух видов: обычный display: grid и встроенный display: inline-grid . Первый генерирует grid-контейнер уровня блока, второй — grid-контейнер уровня строки. Контейнеры-сетки не являются блочными контейнерами, поэтому некоторые CSS-свойства не работают в контексте макета сетки:

  • float и clear игнорируются элементами сетки (но не самим контейнером-сеткой).
  • vertical-align не влияет на элементы сетки.
  • Псевдоэлементы ::first-line и ::first-letter не применяются к контейнеру-сетке и его потомкам.
  • Если контейнер-сетка является контейнером уровня строки display: inline-grid и для него заданы обтекание или абсолютное позиционирование, то вычисляемое значение свойства display будет grid .

3. Определение сетки

Когда вы создаете контейнер-сетку, сетка по умолчанию имеет один столбец и одну строку, которые занимают полный размер контейнера. Для разделения контейнера-сетки на столбцы и строки используются свойства grid-template-columns , grid-template-rows и grid-template-areas . С помощью этих свойств можно определить сетку явно.

Окончательная сетка может оказаться больше из-за элементов сетки, размещенных вне явной сетки; в этом случае будут созданы неявные дорожки, размер этих неявных дорожек будет определяться свойствами grid-auto-rows и grid-auto-columns .

Свойства grid и grid-template — это сокращенные обозначения, которые можно использовать для одновременной установки всех трех явных свойств сетки grid-template-columns , grid-template-rows и grid-template-areas . grid сбрасывает свойства, управляющие неявной сеткой, тогда как свойство grid-template оставляет их без изменений.

3.1. Строки и столбцы

Количество строк / столбцов определяется с помощью свойств grid-template-rows и grid-template-columns . Свойства не наследуются.

grid-template-rows, grid-template-columns
Значения:
none Указывает, что свойство не создает явных дорожек сетки (хотя явные дорожки сетки все еще могут создаваться свойством grid-template-areas ). При отсутствии явной сетки любые строки/столбцы будут генерироваться неявно, а их размер будет определяться свойствами grid-auto-rows и grid-auto-columns . Значение по умолчанию.
список дорожек / автоматический список дорожек Устанавливает список дорожек в виде последовательности функций определения размера дорожек и названий линий сетки. Каждая функция определения размера дорожки может быть задана в единицах длины, как процент от размера контейнера-сетки или доля свободного пространства в сетке. Размер также может быть указан как диапазон с помощью нотации minmax() .
3.1.1. Относительные, абсолютные единицы и процентные значения для определения дорожек сетки (длина)

Размеры дорожек сетки можно задавать с помощью положительных значений, используя относительные единицы длины — например, em , vh , vw ; абсолютные единицы длины — px ; и проценты % . Размеры в % вычисляются от ширины или высоты контейнера-сетки.

3.1.2. Гибкие размеры дорожек: единица измерения fr

fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc() . Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту, например:

Если сумма всех гибких размеров дорожек меньше 1 , они будут занимать только соответствующую долю оставшегося пространства, а не расширяться, чтобы заполнить его полностью.

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

3.1.3. Минимальные и максимальные размеры дорожек

Ключевое слово max-content устанавливает для дорожки размер, который занимает максимально необходимое пространство с учетом содержимого элемента сетки.

min-content позволяет занимать минимальное пространство, необходимое для этого содержимого, при этом ширина элемента ориентируется на самое длинное слово или на самое широкое изображение.

Функция minmax(min,max) определяет диапазон размеров, больше или равный min и меньше или равный max . Если max , то max игнорируется, а minmax(min,max) обрабатывается как min . Значения в fr можно устанавливать только как максимальное.

3.1.4. Автоматические размеры

Значение auto ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height . Как максимум, обрабатывается так же, как и max-content . Может растягиваться за счет свойств align-content и justify-content .

3.1.5. Соответствие содержимому

Размеры дорожек можно задавать с помощью значения fit-content(длина или %) , представляющее собой формулу min(maximum size, max(minimum size, argument)) , которая вычисляется как minmax(auto, max-content) , то есть auto . При этом, размер дорожки ограничивается значением, указанным в скобках, и если оно больше, чем автоматический минимум.

3.1.6. Повтор строк и столбцов

Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк. Общая форма синтаксиса следующая:

Первый аргумент задает количество повторений, которое может быть задано с помощью положительного целого числа или ключевых слов. Второй аргумент — размер повторяющейся дорожки. Однако, существуют некоторые ограничения:

  • Нотация repeat() не может быть вложенной.
  • Значения auto-fill или auto-fit не могут быть совмещены с min-content , max-content , auto , fit-content() или fr .

Синтаксис repeat() имеет несколько форм:

Используя значение auto-fill , вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку. Если вы используете auto-fit , то дорожки, которые не содержат элементы сетки, будут сброшены.

3.2. Именованные области

Свойство grid-template-areas определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на которые можно ссылаться из свойств размещения сетки. Синтаксис свойства обеспечивает визуализацию структуры сетки, облегчая понимание общего макета контейнера-сетки. Свойство не наследуется.

grid-template-areas
Значения:
none Указывает, что никакие именованные области сетки и никакие явные дорожки сетки не определены этим свойством (хотя явные дорожки сетки все еще могут быть созданы с помощью grid-template-columns или grid-template-rows ). При отсутствии явной сетки любые строки/столбцы будут генерироваться неявно, а их размер будет определяться свойствами grid-auto-rows и grid-auto-columns . Значение по умолчанию.
строка + Последовательность идентификаторов, определяющая, как должны отображаться строки и столбцы.

Каждый идентификатор сетки в значении grid-template-areas соответствует ячейке сетки. Как только все ячейки идентифицированы, браузер объединяет все смежные ячейки с одинаковыми именами в одну область, которая охватывает все их, при условии, что они описывают область прямоугольной формы. Если вы попытаетесь настроить более сложные области, весь шаблон будет недействительным и области сетки не будут определены.

Все строки должны содержать одинаковое количество столбцов. Если вы хотите определить только некоторые ячейки как часть области сетки, вы можете использовать одну или несколько . для заполнения этих безымянных ячеек. При определении областей сетки идентификаторы можно перечислять через единичный пробел, без разрыва строки. Или же выровнять с помощью пробелов/табуляции и перевода строки для большей наглядности.

Области сетки полезны для определения семантических отношений между различными частями макета страницы, позволяя указать, какая часть страницы включает в себя верхний колонтитул, боковую панель, область содержимого и нижний колонтитул.

После того, как вы создали области сетки, элементы сетки могут быть назначены непосредственно, чтобы занимать эти области, используя свойство grid-area .

Рис. 2. Размещение элементов сетки с помощью именованных областей

3.3. Краткая запись явной сетки

Свойство 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 в список дорожек, указанный после косой черты (или ни одного, если не указан).

Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована).

3.4. Неявная сетка
3.4.1. Автоматические дорожки сетки

Если элемент сетки расположен в строке или столбце, размер которых не определен явно grid-template-rows или grid-template-columns , создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки.

По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее. Свойства не наследуются.

grid-auto-columns, grid-auto-rows
Значения:
auto Значение по умолчанию.
размер дорожки + В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки.

Рис. 3. Автоматические дорожки сетки

3.4.2. Автоматическое размещение

Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения. Свойство grid-auto-flow управляет автоматическим размещением элементов сетки без явного положения. После заполнения явной сетки (или если явной сетки нет) автоматическое размещение также приведет к генерации неявных дорожек сетки. Свойство не наследуется.

grid-auto-flow
Значения:
row Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию.
column Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости.
dense Алгоритм "плотной" укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами.

Свойство будет полезным при создании компактных галерей, если для изображений не задан порядок, в котором они должны быть расположены. Для каждого элемента сетки браузер сканирует всю сетку в заданном направлении потока (строка или столбец), начиная от начальной точки потока (верхний левый угол, на языках LTR — слева направо), пока не найдет место, куда поместится этот элемент сетки.

Рис. 4. Галерея изображений в стиле Masonry с помощью автоматического размещения элементов сетки

3.5. Краткая запись сетки

Свойство 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 сбрасываются к своим начальным значениям.

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-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 и целое положительное число/имя линии задают диапазон ячеек для размещения элемента сетки.

Рис. 5. Размещение элементов сетки с помощью числовых индексов линий

5.1.1. Именованные линии сетки

Хотя на линии сетки можно ссылаться по их числовому индексу, именованные линии облегчают понимание и использование свойств размещения сетки. Линии могут быть названы явно в свойствах grid-template-rows и grid-template-columns или неявно путем создания именованных областей сетки в свойстве grid-template-areas .

Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. В качестве имени линии нельзя использовать слово span .

Рис. 6. Размещение элементов сетки с помощью именованных линий

Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas , принимая вид name-start и name-end . Имена линий сетки никогда не заменяют другие имена линий сетки. Вместо этого они просто накапливаются.

5.2. Краткая запись свойств размещения элементов сетки

Свойства 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
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 ), если они указаны в контейнере сетки, определяют промежутки между строками и столбцами сетки. При определении размера дорожки каждый промежуток рассматривается как дополнительная пустая дорожка указанного размера. Дополнительный промежуток также может быть добавлен между дорожками за счет свойств justify-content и align-content .

Промежутки добавляются только между двумя дорожками сетки, то есть они не добавляются перед первой и после последней дорожки.

CSS-свойства для grid-контейнера

В этом уроке мы изучим CSS-свойства, которые применяются к grid-контейнеру. Но перед этим давайте освежим в памяти, как вообще создается grid-контейнер и какие бывают его вариации.

Итак, для инициализации grid-контейнера необходимо применить к необходимому HTML-элементу свойство display , указав одно из трех следующих значений:

  • grid (создает блочный grid-контейнер);
  • inline-grid (создает строчный grid-контейнер);
  • subgrid (если ваш grid-контейнер сам по себе является grid-элементом, вы можете использовать это свойство, чтобы размеры его строк/столбцов были взяты из его родительского элемента).

Обратите внимание: на grid-контейнер не оказывают влияния такие свойства, как float , clear , vertical-align и column .

Теперь рассмотрим специальные свойства для grid-контейнера:

Свойства grid-template-rows и grid-template-columns

Данные свойства определяют размеры строк и столбцов сетки. В значениях указываются необходимые параметры через пробел, которые означают размеры каждого grid-пути, а между ними можно указывать названия grid-линий.

  • <длина-пути> — может быть указана в единицах измерения длины CSS, в процентах или же в виде доли свободного места в сетке (с использованием единицы fr (англ. fraction));
  • <имя-линии> — произвольное имя на ваше усмотрение, заключенное в квадратные скобки.
Пример 1

Если вы не указываете имена grid-линий между значениями grid-путей, то grid-линиям автоматически присваиваются числовые имена (1, 2, 3 и т. д.):

grid-template-columns и grid-template-rows

Пример 2

Вы можете явно указать имена grid-линий:

Свойства grid-template-columns и grid-template-rows

Пример 3

Grid-линия может иметь несколько имен одновременно! В примере ниже третьей grid-линии будет присвоено два имени — col-three и the-end :

Пример 4

Если некоторые условия построения сетки повторяются, можно использовать функцию repeat() для компактности и удобства. Например:

Пример 5

Единица fr позволяет задать размер grid-пути в виде доли свободного пространства в grid-контейнере. Например, следующий код приведет к тому, что каждая колонка будет занимать ⅓ ширины grid-контейнера:

Пример 6

Вычисление свободного пространства происходит только после применения фиксированных значений. В примере ниже общий объем свободного пространства, доступного для значений fr , не включает в себя 70 пикселей:

Свойство grid-template-areas

Свойство grid-template-areas определяет шаблон сетки, используя имена grid-областей, которые заданы с помощью свойства grid-area (данное свойство применяется к grid-элементам и рассматривается в следующем уроке). Количество повторов имени grid-области определяет, сколько grid-ячеек образует эта область. Точка обозначает пустую grid-ячейку. Сам синтаксис являет собой визуализацию структуры сетки.

  • <имя-области> — имя grid-области, заданное свойством grid-area ;
  • . — точка, которая обозначает пустую grid-ячейку;
  • none — grid-области не определены.

Этот код определяет сетку с пятью столбцами и тремя строками. Ширина столбцов одинаковая — каждый занимает одну долю ( 1fr ) свободного пространства grid-контейнера. Вся верхняя строка является grid-областью с названием header и содержит пять ячеек. Средняя строка включает в себя трехъячеечную grid-область main , одну пустую ячейку и одноячеечную grid-область sidebar . Последнюю строку полностью занимает grid-область footer из пяти ячеек. Итоговая схема данной сетки выглядит так:

Свойство grid-template-areas

Важно: каждая строка в объявлении должна иметь одинаковое количество ячеек.

Для создания одной пустой grid-ячейки можно использовать любое количество точек, стоящих рядом. Иными словами, до тех пор, пока между этими точками нет пробелов, они будут представлять собой одну grid-ячейку.

Обратите внимание, что здесь вы не даете имена grid-линиям, а именуете только grid-области. При этом grid-линии на обоих концах grid-областей будут получать имена автоматически. К примеру, если grid-область называется header , то начальная горизонтальная grid-линия и начальная вертикальная grid-линия получат имя header-start , а конечная горизонтальная grid-линия и конечная вертикальная grid-линия получат имя header-end . Таким образом некоторые grid-линии могут иметь несколько имен. В нашем примере выше крайняя левая grid-линия имеет три имени: header-start , main-start и footer-start .

Свойство grid-template

Свойство grid-template — это сокращенная запись, которая позволяет одновременно задать значения для свойств grid-template-rows , grid-template-columns и grid-template-areas .

  • none — устанавливает исходные значения для всех трех свойств;
  • <grid-template-rows> / <grid-template-columns> — задает свойствам grid-template-columns и grid-template-rows соответствующие указанные значения, а свойству grid-template-areas присваивает значение none .

Также существует более сложный, но весьма удобный синтаксис для указания значений всех трех свойств. Примеры полной и сокращенной записи:

Поскольку свойство grid-template не сбрасывает неявные свойства сетки ( grid-auto-columns , grid-auto-rows и grid-auto-flow ), при том, что в большинстве случаев вы захотите это сделать, рекомендуем использовать свойство grid вместо grid-template .

Свойства grid-row-gap и grid-column-gap

Данные свойства определяют размеры grid-линий. Вы можете думать об этом как об установке промежутков между строками и столбцами. Значение задается в любых доступных единицах измерения CSS:

grid-row-gap и grid-column-gap

Такие промежутки создаются только между строками/колонками, но не с внешних краев.

Свойство grid-gap

Как вы догадались, свойство grid-gap представляет собой сокращенную запись свойств grid-row-gap и grid-column-gap . В значении указываются два параметра через пробел — сначала для промежутков между строками, затем для промежутков между столбцами:

Если между строками и колонками планируются одинаковые промежутки, в значении свойства grid-gap можно указать один параметр.

Свойство justify-items

Свойство justify-items выравнивает содержимое внутри grid-элемента вдоль оси строки. Значение влияет на все grid-элементы контейнера.

  • stretch (значение по умолчанию) — содержимое заполняет всю ширину grid-области;
  • start — содержимое прижимается к левому краю grid-области;
  • end — содержимое прижимается к правому краю grid-области;
  • center — содержимое выравнивается по центру grid-области.

Ниже — серия примеров с использованием разных значений свойства justify-items :

justify-items: stretch
justify-items: start
justify-items: end
justify-items: center

Также можно задать выравнивание по оси строки для отдельных элементов сетки, используя свойство justify-self (мы рассмотрим его в следующем уроке).

Свойство align-items

Свойство align-items выравнивает содержимое внутри grid-элемента вдоль оси столбца. Применяется ко всем grid-элементам контейнера.

  • stretch (значение по умолчанию) — содержимое заполняет всю высоту grid-области;
  • start — содержимое прижимается к верхнему краю grid-области;
  • end — содержимое прижимается к нижнему краю grid-области;
  • center — содержимое выравнивается по центру grid-области.

Также можно задать выравнивание по оси столбца для отдельных элементов сетки, используя свойство align-self (будет рассмотрено в следующем уроке).

Свойство justify-content

Может случиться так, что общий размер сетки будет больше, чем размер grid-контейнера. Например, такое может произойти, если ширина всех grid-элементов является фиксированной (т. е. задана в таких единицах как px ). В этом случае вы можете установить выравнивание сетки в grid-контейнере с помощью свойства justify-content . Это свойство выравнивает сетку вдоль оси строки.

  • stretch — изменяет размеры grid-элементов так, чтобы сетка могла заполнить всю ширину grid-контейнера;
  • start — выравнивает сетку по левому краю grid-контейнера;
  • end — выравнивает сетку по правому краю grid-контейнера;
  • center — выравнивает сетку по центру grid-контейнера;
  • space-around — добавляет равное количество пространства между каждым grid-элементом, а по краям сетки оставляет половину этого пространства;
  • space-between — добавляет равное количество пространства между каждым grid-элементом, но по краям сетки не создает пространства;
  • space-evenly — добавляет равное количество пространства между каждым grid-элементом, включая края сетки.

justify-content: stretch

justify-content: start

justify-content: end

justify-content: center

justify-content: space-around

justify-content: space-between

justify-content: space-evently

Свойство align-content

Данное свойство похоже на предыдущее, с той лишь разницей, что теперь выравнивание сетки происходит по оси столбца. Свойство align-content принимает те же значения, что и justify-content (вы можете посмотреть их выше). Мы не будем их дублировать, но упомянем об отличии значений start и end : если в случае со свойством justify-content сетка выравнивается по левому (start) или правому (end) краю, то при использовании данных значений со свойством align-content сетка будет выравниваться либо по верхнему краю grid-контейнера (start), либо по нижнему (end).

Свойства grid-auto-rows и grid-auto-columns

Данные свойства определяют размеры любых grid-путей, сгенерированных автоматически (неявных grid-путей). Неявные grid-пути создаются, когда вы явно задаете позицию строк и столбцов (через свойства grid-template-rows и grid-template-columns ), которые находятся за пределами заданной сетки.

В качестве значения устанавливается размер пути в любых единицах измерения длины CSS, а также в процентах или долях свободного пространства fr .

Чтобы понять, как создаются неявные grid-пути, взгляните на демонстрацию ниже:

grid-template-rows и grid-template-columns

Этот код создаст сетку 2×2. Но теперь представьте, что вы используете свойства grid-row и grid-column для размещения ваших grid-элементов следующим образом:

Неявные grid-пути

Мы сказали элементу .item-b начинаться в столбце 5 и заканчиваться в столбце 6, но мы никогда не создавали столбцы 5 и 6. Именно потому, что мы ссылаемся на несуществующие столбцы, появятся неявные grid-пути с шириной 0. И мы можем использовать свойства grid-auto-rows и grid-auto-columns для определения размеров этих неявных grid-путей:

Размеры для неявных grid-путей

Свойство grid-auto-flow

Если у вас есть grid-элементы, которые вы не создавали явно, то сработает алгоритм автоматического размещения этих элементов. Свойство grid-auto-flow позволяет управлять тем, как работает алгоритм авторазмещения.

  • row (значение по умолчанию) — говорит алгоритму авторазмещения заполнять каждую строку сетки поочередно, добавляя новые строки по мере необходимости;
  • column — говорит алгоритму авторазмещения заполнять каждый столбец сетки поочередно, добавляя новые столбцы по мере необходимости;
  • dense — говорит алгоритму авторазмещения попытаться заполнить ранее образовавшиеся промежутки в сетке, если появятся подходящие по размеру grid-элементы. Важно: это может привести к изменению порядка вывода элементов.

Например, взгляните на этот HTML-код:

Мы определяем сетку с двумя строками и пятью столбцами и задаем свойство grid-auto-flow со значением row :

При размещении элементов в сетке укажем позиции только для двух из них:

Поскольку мы установили значение row для свойства grid-auto-flow , наша сетка будет выглядеть так. Обратите внимание, как три элемента, которые мы не размещали ( .item-b , .item-c и .item-d ), размещаются в строках самостоятельно:

grid-auto-flow: row

И, соответственно, если мы зададим для свойства grid-auto-flow значение column , то элементы .item-b , .item-c и .item-d разместятся в столбцах:

grid-auto-flow: column

Свойство grid

Наконец, мы дошли до последнего свойства в списке. Итак, свойство grid — это краткая запись, позволяющая в одной строке определить следующие свойства:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Также свойство grid устанавливает исходные значения для свойств grid-column-gap и grid-row-gap , даже если они не заданы явно в данном свойстве.

  • none — устанавливает значения по умолчанию для всех свойств;
  • <grid-template-rows> / <grid-template-columns> — устанавливает указанные значения для свойств grid-template-rows и grid-template-columns соответственно, а также задает значения по умолчанию для других свойств;
  • <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] — устанавливает указанные значения для свойств grid-auto-flow , grid-auto-rows и grid-auto-columns соответственно. Если значение для свойства grid-auto-columns не задано, то ему задается значение, установленное для grid-auto-rows . Если значения не заданы для обоих свойств, устанавливаются значения по умолчанию.
Пример

Следующие блоки CSS-кода идентичны по своему действию:

Следующая пара также эквивалентна:

Свойство grid также понимает более сложный, но удобный синтаксис для установки всех параметров сразу. Вы определяете свойства grid-template-areas , grid-template-rows и grid-template-columns , а для всех остальных свойств устанавливаются их значения по умолчанию. Иными словами, вы определяете имена grid-линий, размеры grid-путей и шаблон сетки. Это проще описать на примере:

Добавить комментарий

Ваш адрес email не будет опубликован.