CSS Grid
Отредактировано: 12 Октября 2019
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. Если второе значение пропущено, первое распространяется на оба параметра.
Здравствуйте!
Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.