CSS Grid

Отредактировано: 13 Апреля 2023

CSS Grid — схема расположения блоков на странице, пришедшая на смену, или даже в помощь Flex-box схеме.

Контейнер

Ячейка

Свойства родительского контейнера

display

Задает контейнеру значение grid или inline-grid, после чего все ближайшие потомки блока начинают подчиняться правилам grid элементов.

.container {
  display: grid | inline-grid;
}

grid — блочный элемент
inline-grid — строчный элемент

Для дочерних элементов grid контейнера перестают работать такие свойства как: float, display: inline-block, display: table-cell, vertical-align и column-*.

grid-template-columns / grid-template-rows

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

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

<track-size> — может быть длиной, процентом или долей свободного места в сетке (единица fr). При необходимости повторения используется repeat().
<line-name> — любое название, указанное вами.

Как это работает

Когда вы оставляете не заполненным параметр имени, т.е. указываете только размеры, линиям сетки автоматически назначаются положительные и отрицательные номера:

.container {
  grid-template-columns: 100px 150px auto 150px 100px;
  grid-template-rows: 25% 100px auto;
}

	100px	150px	auto	150px	100px	[1] [-4]
25%						[2] [-3]
100px						[3] [-2]
auto						[4] [-1]
	[1 \| -6]	[2 \| -5]	[3 \| -4]	[4 \| -3]	[5 \| -2]	[6 \| -1]

Но, линиям можно присвоить определенные имена, указав их в параметре:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

	100px	150px	auto	150px	100px	[row1-start]
25%						[row1-end]
100px						[third-line]
auto						[last-line]
	[first]	[line2]	[line3]	[col4-start]	[five]	[end]

Линиям можно присвоить более чем 1 имя. Запись нескольких имен для линии, row1-end и row2-start:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

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

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

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

.item {
  grid-column-start: col-start 2;
}

Размер может быть долей, при использовании единицы fr. Например, так каждая ячейка таблицы будет занимать треть от размера контейнера:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Свободное пространство для распределения на доли вычисляется после того как оттуда вычитаются остальные статичные размеры:

/* В этом примере из общей ширины контейнера 
сперва вычитаются значения 1rem, 1em, 50px, затем, 
оставшаяся часть контейнера делится на 4 (количество долей указанных в вызове), 
и распределяется по элементам */

.container {
  grid-template-columns: 1rem 1em 1fr 50px 2fr 1fr;
}

grid-template-areas

Свойство задает шаблон сетки, который определяется свойством grid-area.

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

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

Как это работает

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

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Шапка

Основной блок

Пустота

При данном подходе к созданию сетки нельзя присваивать имена промежуточным линиям. Имена присваиваются автоматически, к конечным линиям областей, исходя из их названий. Например, начальная линия области header будет называться header-start, конечная header-end. Соответственно некоторые линии будут иметь несколько имен, например начальная вертикальная линия из примера выше будет именоваться header-start, main-start и footer-start.

grid-template

Сокращение для настройки grid-template-rows, grid-template-columns и grid-template-areas в одной декларации.

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

/* Усложненный синтаксис */
.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

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-column-gap / grid-row-gap

Определяет размер линий сетки. Иногда это представляют как ширину желобов между столбцами / строками.

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

/* Chrome 68+, Safari 11.2 Release 50+, Opera 54+. */
.container {
  column-gap: <line-size>;
  row-gap: <line-size>;
}

<line-size> — размер.

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

Как это работает

.container {
  grid-template-columns: 40% 10% 40%;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

grid-gap

Сокращение свойств grid-row-gap и grid-column-gap в одном объявлении.

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

/* Chrome 68+, Safari 11.2 Release 50+, Opera 54+. */
.container {
  gap: <grid-row-gap> <grid-column-gap>;
}

<grid-row-gap> <grid-column-gap> — размер значений. Если указано только 1 значение, он распространиться на оба параметра.

justify-items

Выравнивает элементы сетки вдоль оси строки (в отличие от align-items не выравнивается вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера.

.container {
  justify-items: start | end | center | stretch;
}

По умолчанию: stretch

start — элементы, должны быть рядом с начальным краем их ячейки.
end — элементы, должны быть рядом с конечным краем их ячейки.
center — элементы, позиционируются в центре ячейки.
stretch — заполняют всю ширину ячейки.

align-items

Выравнивает элементы сетки вдоль оси столбца (в отличие от justify-items не выравнивается вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера.

.container {
  align-items: start | end | center | stretch;
}

По умолчанию: stretch

start — элементы у начального края их ячейки.
end — элементы у конечного края их ячейки.
center — элементы по центру ячейки.
stretch — элементы заполняют всю высоту ячейки.

place-items

Сокращение свойств align-items и justify-items в одном объявлении.

.container {
  place-items: <align-items> / <justify-items>;
}</justify-items></align-items>

<align-items> / <justify-items> — первое значение устанавливает align-items, второе значение justify-items. Если второе значение опущено, первое значение присваивается обоим свойствам.

justify-content

Выравнивает сетку в контейнере вдоль оси строки (в отличие от align-content не выравнивает сетку вдоль оси столбца).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

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

align-content

Выравнивает сетку в контейнере вдоль оси столбца (в отличие от justify-content не выравнивает сетку вдоль оси строки).

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

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

grid-auto-columns / grid-auto-rows

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

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

<track-size> — может указываться длиной, процентом или долей свободного места в сетке (используя единицу fr)

Как это работает?

/* Определим сетку 2*2 */
.container {
  grid-template-columns: 70px 70px;
  grid-template-rows: 90px 90px;
}

/* Определим 2 элемента */
.inner {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.outer {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
}

На выходе получим сетку, где 2 первых столбца ячеек имеют ширину 70px и высоту 90px, а остальные ячейки, появляются из-за элемента с классом outer, и высчитываются автоматически.

inner

outer

Чтобы подобные "автоматические" ячейки имели определенный размер, используются свойства grid-auto-columns и grid-auto-rows

Пример с указанной автоматической шириной

.container {
  grid-template-columns: 70px 70px;
  grid-template-rows: 90px 90px;
  grid-auto-columns: 70px;
}

inner

outer

grid-auto-flow

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

.container {
  grid-auto-flow: row | column | row dense | column dense
}

По умолчанию: row

Этот параметр управляет только визуальным порядком элементов на странице, и может выносить элементы за края сетки, что может стать причиной сложности восприятия.

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

Второй

Третий

Четвертый

Пятый

Шестой
```
.first{
  grid-column: 1;
  grid-row: 1 / 3;
}
.second{
  grid-column: auto/span 2;
}
.fifth {
  grid-column: auto/span 3;
  grid-row: 1 / 3;
}
```
column — алгоритм будет заполнять каждую ячейку по столбцам, переходя в новую строку по мере необходимости.
Первый

Второй

Третий

Четвертый

Пятый

Шестой
```
.first{
  grid-column: 1;
  grid-row: 1 / 3;
}
.second{
  grid-column: auto/span 2;
}
.fifth {
  grid-column: auto/span 3;
  grid-row: 1 / 3;
}
```
dense — алгоритм пытается заполнить ранние ячейки сетки, если маленькие элементы появляются после больших. (можно устанавливать row dense или column dense)
Первый

Второй

Третий

Четвертый

Пятый

Шестой
```
.first{
  grid-column: 1;
  grid-row: 1 / 3;
}
.second{
  grid-column: auto/span 2;
}
.fifth {
  grid-column: auto/span 3;
  grid-row: 1 / 3;
}
```

grid

Сокращение для свойств в одном объявлении: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow (можно указывать только явные или неявные свойства сетки в одной декларации).

.container {
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

none — устанавливает все вспомогательные свойства в их начальные значения
<grid-template> — работает так же, как grid-template сокращенное
<grid-template-rows> / [ auto-flow && dense ] <grid-auto-columns> — устанавливает grid-template-rows указанное значение. Если auto-flow ключевое слово находится справа от косой черты, оно устанавливает grid-auto-flow значение column. Если dense ключевое слово задано дополнительно, алгоритм автоматического размещения использует «плотный» алгоритм упаковки. Если значение grid-auto-columns опущено, оно установлено auto
[ auto-flow && dense ] <grid-auto-rows> / <grid-template-columns> — устанавливает grid-template-columns указанное значение. Если auto-flow ключевое слово находится слева от косой черты, оно устанавливает grid-auto-flow значение row. Если dense ключевое слово задано дополнительно, алгоритм автоматического размещения использует «плотный» алгоритм упаковки. Если значение grid-auto-row sопущено, оно установлено auto.

Примеры

.container {
    grid: 100px 300px / 3fr 1fr;
  }

.container {
    grid: auto-flow / 200px 1fr;
  }

.container {
    grid: auto-flow dense 100px / 1fr 2fr;
  }

.container {
    grid: 100px 300px / auto-flow 200px;
  }

.container {
    grid: [row1-start] "header header header" 1fr [row1-end]
          [row2-start] "footer footer footer" 25px [row2-end]
          / auto 50px auto;
  }

Свойства дочерних элементов

grid-column-start / grid-column-end / grid-row-start / grid-row-end

Определяет местоположение элемента в сетке, ссылаясь на конкретные линии сетки.

grid-column-start / grid-row-start — позиция, в которой начинается элемент;
grid-column-end / grid-row-end — позиция, в которой заканчивается элемент.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

Значения:

<line> — может быть числом, которое ссылается на номер линии, или именем линии сетки;
span <number> — элемент будет охватывать необходимое количество линий сетки;
span <name> — элемент будет охватывать сетку до тех пор, пока не достигнет линии с указанным именем;
auto — автоматическое размещение и диапазон элемента, или диапазон по умолчанию.

Тонкости и примеры

Если не указаны значения grid-column-end / grid-row-end, то элемент, по умолчанию, считается равным 1 ячейке.

Элементы могут перекрывать друг-друга, для управления порядком наложения можно использовать свойство z-index.

grid-column / grid-row

Сокращенная запись для grid-column-start + grid-column-end и grid-row-start + grid-row-end, соответственно.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

<start-line> / <end-line> — допускаются те же значения что и в полной записи, включая значение span.

grid-area

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

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

<name> — любое имя;
<row-start> / <column-start> / <row-end> / <column-end> — может быть номером или именем линии.

justify-self

Выравнивает элемент внутри ячейки сетки вдоль оси строки (в отличие от align-self не выравнивается вдоль оси столбца). Это значение относится к элементу внутри одной ячейки.

.item {
  justify-self: start | end | center | stretch;
}

По умолчанию: stretch

start — элемент у начального края ячейки.
end — элемент у конечного края ячейки.
center — элемент по центру ячейки.
stretch — заполняет всю ширину ячейки.

align-self

Выравнивает элемент внутри ячейки сетки вдоль оси столбца (в отличие от justify-self не выравнивается вдоль оси строки). Это значение применяется к элементу внутри одной ячейки.

.item {
  align-self: start | end | center | stretch;
}

По умолчанию: stretch

start — элемент у начального края ячейки.
end — элемент у конечного края ячейки.
center — элемент по центру ячейки.
stretch — заполняет всю длину ячейки.

place-self

Объединяет свойства align-self и justify-self.

.item-a {
  place-self: center;
}

auto — значение «по умолчанию», зависящее от параметров верстки.
<align-self> / <justify-self> — первое значение устанавливает параметр align-self, второе justify-self. Если второе значение пропущено, первое распространяется на оба параметра.