Макет сетки CSS (Grid) представляет собой двухмерную систему макета страницы, его внешний вид полностью ниспровергает традиционный способ макета страницы. Этот учебник был создан, чтобы помочь вам лучше понять и изучить Grid Layout (Сетка).
содержание
- сетка-контейнер
- показать сетку
- Минимальный и максимальный размер трека
- повторяющаяся сетка
- Определение разрывов сетки
- Найдите элементы с номерами линий сетки
- Элементы сетки охватывают строки и столбцы
- именование линий сетки
- Расположение элементов с именами линий сетки
- Назовите и расположите элементы с линиями сетки с тем же именем
- Назовите и расположите элементы с помощью областей сетки
- Неявная сетка
- Неявно названная область сетки
- Линии сетки с неявными именами
- Каскадные элементы сетки
- Выравнивание элементов сетки 1
- Выравнивание элементов сетки 2
- Выравнивание дорожек сетки
1 сетчатый контейнер
атрибутdisplayЗначение установленоgridилиinline-gridСоздается контейнер сетки, и все непосредственные дочерние узлы контейнера автоматически становятся элементами сетки.
1.1 Пример 1
grid {
display: grid;
｝
Элементы сетки располагаются рядами, а элементы сетки занимают всю ширину контейнера.
1.1 Пример 2
grid {
display: inline-grid;
｝
Элементы сетки располагаются рядами, а ширина элементов сетки определяется их собственной шириной.
2 Показать сетку
Атрибутыgrid-template-rowsа такжеgrid-template-columnsИспользуется для отображения сетки определения, используемой для определения дорожек строк и столбцов соответственно.
2.1 Пример 3
grid {
display: grid;
grid-template-rows: 50px 100px；
｝
Атрибутыgrid-template-rowsИспользуется для определения размера строки, т. е. размера дорожки. Размер дорожки может быть любым неотрицательным значением длины (px, %, em и т. д.).
Высота строки элемента сетки 1 составляет 50 пикселей, а высота строки элемента сетки 2 — 100 пикселей.
Поскольку определены только две высоты строк, высоты строк элементов сетки 3 и 4 зависят от их собственной высоты.
2.2 Пример 4
grid {
display: grid;
grid-template-columns: 90px 50px 120px；
｝
Подобно определению строки, атрибутgrid-template-columnsИспользуется для определения размеров столбца.
Поскольку в определении всего три столбца, элементы 4, 5 и 6 находятся на новой строке, а поскольку они находятся на дорожке в столбцах 1, 2 и 3, их ширина равна ширине дорожки в столбцы 1, 2 и 3 в определении ширина.
Столбцы 1, 2 и 3 элементов сетки имеют ширину 90, 50 и 120 пикселей соответственно.
2.3 Пример 5
grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr；
｝
единица измеренияfrИспользуется для указания квоты размера дорожки, указывая, что доступное пространство выделяется пропорционально квоте.
В этом примере элемент 1 составляет 1/4 ширины, элемент 2 — 1/4 ширины, а элемент 3 — 1/2 ширины.
2.4 Пример 6
grid {
display: grid;
grid-template-columns: 3rem 25% 1fr 2fr；
｝
единица измеренияfrПри смешивании с другими единицами длиныfrРасчет основан на оставшемся пространстве после выделения других единиц.
В этом примере1fr = (容器宽度 - 3rem - 容器宽度的25%) / 3
3 Настройки минимального и максимального размера дорожек
функцияminmax()Используется для определения минимальных/максимальных граничных значений трека.
3.1 Пример 7
grid {
display: grid;
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
｝
функцияminmax()Принимает два параметра: первый параметр представляет минимальный размер дорожки, а второй параметр представляет максимальный размер дорожки. Значение длины может быть автоматическим, что означает, что размер дорожки может быть растянут или сжат в соответствии с размером содержимого.
В этом примере минимальная высота первой строки установлена на 100 пикселей, но максимальная высота установлена наauto, что указывает на то, что высота строки может быть увеличена более чем на 100 пикселей в зависимости от содержимого.
В этом примере максимальная ширина первого столбца установлена равной 50 %, что означает, что его ширина не может превышать 50 % от всей ширины контейнера.
4 повторяющиеся дорожки сетки
функцияrepeat()Используется для определения повторяющихся дорожек сетки, особенно при наличии нескольких одинаковых элементов.
4.1 Пример 8
grid {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
｝
функцияrepeat()Принимает два параметра: первый параметр указывает количество повторений, а второй параметр указывает размер дорожки.
4.2 Пример 9
grid {
display: grid;
grid-template-columns: 30px repeat(3, 1fr) 30px;
｝
функцияrepeat()Может использоваться в списках определения дорожек.
В этом примере ширина столбцов 1 и 5 составляет 30 пикселей. функцияrepeat()Создал средние 3 столбца, ширина каждого столбца1fr.
5 Определите промежутки сетки
Атрибутыgrid-column-gapа такжеgrid-row-gapИспользуется для определения разрывов сетки.
Пробелы в сетке создаются только между строками и столбцами, без промежутков между элементами и границами.
5.1 Пример 10
grid {
display: grid;
grid-row-gap: 20px;
grid-column-gap: 5rem;
｝
Размер промежутка может быть любым неотрицательным значением длины (px, %, em и т. д.).
5.2 Пример 11
grid {
display: grid;
grid-gap: 100px 1em;
｝
Атрибутыgrid-gapдаgrid-row-gapа такжеgrid-column-gapкраткая форма .
Первое значение представляет пробелы в строках, а второе значение представляет пробелы в столбцах.
5.3 Пример 12
grid {
display: grid;
grid-gap: 2rem;
｝
Если имеется только одно значение, оно представляет собой разрыв между строками и столбцами.
6 Разместите элементы с номерами линий сетки
Линии сетки в основном используются для обозначения начала и конца дорожек сетки.
Каждый номер линии сетки начинается с 1 и нумеруется вперед с шагом 1, включая два набора линий сетки в строках и столбцах.
6.1 Пример 13
.item1 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}
Это сетка с 3 строками и 2 столбцами, то есть 4 линии сетки в строках и 3 линии сетки в столбцах. Элемент 1 располагается в строке 2 и столбце 2 с использованием номеров линий сетки.
В этом примере элемент охватывает только одну строку и один столбец, тогдаgrid-row-endа такжеgrid-column-endможно опустить.
6.2 Пример 14
.item1 {
grid-row: 2;
grid-column: 3 / 4;
}
Атрибутыgrid-rowдаgrid-row-startа такжеgrid-row-endкраткая форма .
Атрибутыgrid-columnдаgrid-column-startа такжеgrid-column-endкраткая форма .
Если указано только одно значение, это означаетgrid-row/column-start.
Если указаны оба значения, первое означаетgrid-row/column-start, второе значение представляетgrid-row/column-end. И вы должны разделить два значения косой чертой (/).
6.3 Пример 15
.item1 {
grid-area: 2 / 2 / 3 / 3;
}
Атрибутыgrid-areaдаgrid-row-start, grid-column-start, grid-row-endа такжеgrid-column-endкраткая форма .
Если указаны все четыре значения, первое означаетgrid-row-start, второе означаетgrid-column-start, третье средствоgrid-row-end, четвертый выражаетgrid-column-end.
7 элементов сетки, охватывающих строки и столбцы
Все элементы сетки по умолчанию занимают одну строку и один столбец, но вы можете указать, что элементы занимают несколько строк или столбцов, используя свойства элемента размещения в предыдущем разделе.
7.1 Пример 16
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
пройти черезgrid-column-startа такжеgrid-column-endЗначение свойства задается таким образом, чтобы элемент сетки занимал несколько столбцов.
7.2 Пример 17
.item1 {
grid-row-start: 1;
grid-row-end: 4;
}
пройти черезgrid-row-startа такжеgrid-row-endЗначение свойства задается таким образом, чтобы элемент сетки занимал несколько строк.
7.3 Пример 18
.item1 {
grid-row: 2 / 5;
grid-column: 2 / 4;
}
сокращенное свойствоgrid-rowа такжеgrid-columnЕго можно использовать либо для позиционирования элементов, либо для размещения элементов в нескольких строках и столбцах.
7.4 Пример 19
.item1 {
grid-row: 2 / span 3;
grid-column: span 2;
}
ключевые словаspanИспользуется для указания количества охватывающих строк или столбцов.
8 Именование линий сетки
При использовании свойствgrid-template-rowsа такжеgrid-template-columnsПри определении сетки вы также можете указать имена линий сетки. Имена линий сетки можно использовать для поиска элементов сетки.
8.1 Пример 20
grid {
display: grid;
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
｝
с атрибутамиgrid-template-rowsа такжеgrid-template-columnsОпределите сетку, а также определите имена линий сетки.
Во избежание путаницы в именах линий сетки не следует использовать ключевые слова в спецификации (spanЖдать).
Чтобы определить имена линий сетки, нужно заключить их в квадратные скобки ([name-of-line]), и должен соответствовать дорожке сетки.
8.2 Пример 21
grid {
display: grid;
grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];
｝
Вы можете определить несколько имен для одной и той же линии сетки, разделив имена пробелами в квадратных скобках.
На каждое имя линии сетки можно ссылаться, чтобы найти проекты сетки.
9 Позиционирование элементов с именем линии сетки
Позиционирование проекта легко с именованными линиями сетки.
9.1 Пример 22
.item1 {
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;
}
Не используйте квадратные скобки для указания имен линий сетки.
9.2 Пример 23
.item1 {
grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;
}
сокращенное свойствоgrid-rowа такжеgrid-columnЭлементы также можно размещать с помощью имен линий сетки.
10 Назовите и расположите элементы с линиями сетки с тем же именем
функцияrepeat()Можно определить линии сетки с одинаковыми именами. Это экономит время именования каждой сетки.
10.1 Пример 24
grid {
display: grid;
grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
}
функцияrepeat()Может использоваться для определения линий сетки с тем же именем. Таким образом, несколько линий сетки имеют одно и то же имя.
Линиям сетки с одинаковыми именами присваивается номер позиции для их уникальной идентификации.
10.2 Пример 25
.item1 {
grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;
}
При размещении элементов с линиями сетки с одинаковыми именами обратите внимание на наличие пробела между именем линии сетки и номером.
В этом примере позиционирование строки для элемента 1 начинается со второго элемента, имя которогоrow-startЛинии сетки, оканчивающиеся на третье имя,row-endГридлины; позиционирование столбцов начинается с 1. Названиеcol-startЛинии сетки, оканчивающиеся на третье имя,col-startлинии сетки.
11 Именование и расположение элементов с помощью областей сетки
Как и в случае с именами линий сетки, вы можете использовать атрибутgrid-template-areasНазовите область сетки. Имена областей сетки можно использовать для поиска элементов сетки.
11.1 Пример 26
grid {
display: grid;
grid-template-areas: "header header"
"content sidebar"
"footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
}
Набор имен областей должен быть заключен в одинарные или двойные кавычки, а каждое имя должно быть разделено пробелом.
Каждый набор имен определяет строку, а каждое имя определяет столбец.
11.2 Пример 27
header {
grid-row-start: header;
grid-row-end: header;
grid-column-start: header;
grid-column-end: header;
}
Имена областей сетки можно использовать в свойствахgrid-row-start, grid-row-end, grid-column-start, а такжеgrid-column-endЗначение , используемое для поиска элемента.
11.3 Пример 28
footer {
grid-row: footer;
grid-column: footer;
}
Имена областей сетки также можно использовать для сокращенных свойств.grid-rowа такжеgrid-columnв значении.
11.4 Пример 29
aside {
grid-area: sidebar;
}
Имена областей сетки также можно использовать для сокращенных свойств.grid-areaв значении.
12 Неявная сетка
Неявные сетки используются для размещения элементов за пределами явной сетки. Неявные сетки иногда используются, когда в сетке отображения недостаточно места или для размещения элементов за пределами сетки отображения. Затем эти элементы можно поместить в неявную сетку.
Неявные сетки доступны через свойстваgrid-auto-rows, grid-auto-columns, а такжеgrid-auto-flowопределять.
12.1 Пример 30
grid {
display : grid;
grid-template-rows: 70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px;
}
В этом примере указана только одна дорожка строки, поэтому высота элементов 1 и 2 составляет 70 пикселей.
Трек строки 2 имеет неявную сетку, автоматически созданную и выделенную для элементов 3 и 4. Атрибутыgrid-auto-rowsОпределяет размеры дорожки строки неявной сетки, т. е. высота элементов 3 и 4 составляет 140 пикселей.
12.2 Пример 31
grid {
display : grid;
grid-auto-flow: row;
}
Направление макета сетки по умолчанию — это направление строки (row).
12.3 Пример 32
grid {
display : grid;
grid-auto-flow: column;
}
Направление компоновки сетки можно определить как направление столбцов (column).
12.4 Пример 33
grid {
display : grid;
grid-template-columns: 30px 60px;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
В этом примере мы определили только две дорожки столбцов с размерами 30px и 60px.
В неявной сетке автоматически создаются дополнительные столбцы и выделяется место для элементов 3, 4 и 5; размер выделенного пространства определяется свойствомgrid-auto-columnsОпределенный.
13 областей сетки с неявными именами
Имена линий сетки могут быть указаны произвольно, но назначения начинаются с-startа также-endКонечное имя имеет дополнительное преимущество, заключающееся в неявном создании именованной области сетки, которую можно использовать для позиционирования элемента.
13.1 Пример 34
grid {
display : grid;
grid-template-rows: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
}
В этом примере строки и столбцы имеют именаinner-startа такжеinner-end, которые неявно присваивают имена областям сетки (inner).
item1 {
grid-area: inner;
}
Это позволяет нам напрямую использовать имя области сетки для поиска элементов вместо использования линий сетки для поиска элементов.
14 Неявно названные линии сетки
Неявно названные линии сетки и неявно названные области сетки работают в обратном порядке.
14.1 Пример 35
grid {
display : grid;
grid-template-areas: "header header"
"content sidebar"
"footer footer";
grid-template-rows: 80px 1fr 40px;
grid-template-columns: 1fr 200px;
}
Линии сетки неявно именуются при определении области сетки. Эти линии сетки называются на основе имени области плюс-startили-endсостоит из суффиксов.
14.2 Пример 36
item1 {
grid-row-start: header-start;
grid-row-end: content-start;
grid-column-start: footer-start;
grid-column-end: sidebar-end;
}
В этом примере заголовок позиционируется неявным именем линии сетки.
15 каскадных сетевых проектов
Несколько элементов могут быть уложены друг на друга с помощью позиционирования элементов, свойствz-indexУровень каскадных элементов может быть изменен.
15.1 Пример 37
.item-1, .item-2 {
grid-row-start: 1;
grid-column-end: span 2;
}
.item-1 { grid-column-start: 1; z-index: 1; }
.item-2 { grid-column-start: 2 }
В этом примере позиционирование строк элементов 1 и 2 начинается с линии сетки строки 1 и охватывает два столбца.
Оба элемента расположены с номерами линий сетки. Элемент 1 начинается с линии сетки 1-го столбца, а элемент 2 начинается с линии сетки 2-го столбца, что приводит к тому, что два элемента размещаются в первом ряду и среднем столбце.
По умолчанию элемент 2 будет располагаться поверх элемента 1, однако установка свойств для элемента 1z-index: 1Это приводит к тому, что элемент 1 накладывается поверх элемента 2.
15.2 Пример 38
.overlay {
grid-row-start: header-start;
grid-row-end: content-end;
grid-column-start: content-start;
grid-column-end: sidebar-start;
z-index: 1;
}
В этом примере с помощьюgrid-template-areasНеявные имена линий сетки в определениях, нацеленные на элемент сетки (overlay) и будет наслоен сверху.
16 Выравнивание элементов сетки
CSSМодуль выравнивания блочной моделиВ дополнение к содержимому CSS Grid элементы сетки могут выполнять несколько выравниваний по направлениям осей строк или столбцов.
Атрибутыjustify-itemsа такжеjustify-selfВыравнивание элементов относительно оси строк, свойствalign-itemsа такжеalign-selfВыравнивает элементы относительно оси столбца.
Атрибутыjustify-itemsа такжеalign-itemsявляется свойством контейнера сетки и поддерживает следующие значения:
- auto
- normal
- start
- end
- center
- stretch
- baseline
- first baseline
- last baseline
16.1 Пример 39
.grid {
grid-template-rows: 80px 80px;
grid-template-columns: 1fr 1fr;
grid-template-areas: "content content"
"content content";
}
.item { grid-area: content }
.grid {
justify-items: start
}
Выровняйте по началу осевой линии строки.
16.2 Пример 40
grid {
justify-items: center;
}
Выровняйте по середине оси ряда.
16.3 Пример 41
grid {
justify-items: end;
}
Выровняйте по концу осевой линии строки.
16.4 Пример 42
grid {
justify-items: stretch;
}
Вытягивается вдоль оси ряда и заполняет всю площадь.stretchявляется значением по умолчанию.
16.5 Пример 43
grid {
align-items: start;
}
Выровняйте по началу оси сетки столбца.
16.6 Пример 44
grid {
align-items: center;
}
Выровняйте по середине оси колонны.
16.7 Пример 45
grid {
align-items: end;
}
Выровняйте по концу линии оси столбца.
16.8 Пример 46
grid {
align-items: stretch;
}
Вытягивается вдоль оси колонны и заполняет всю площадь.
16.9 Пример 47
grid {
justify-items: center;
align-items: center;
}
Элементы располагаются посередине между осями строк и столбцов.
17 Выравнивание предметов сетки 2
Элементы могут определять собственное выравнивание с помощью свойств align-self и justify-self и поддерживать следующие значения свойств:
- auto
- normal
- start
- end
- center
- stretch
- baseline
- first baseline
- last baseline
17.1 Пример 48
.item1 { justify-self: start }
.item2 { justify-self: center }
.item3 { justify-self: end }
Атрибутыjustify-selfОпределяет выравнивание в направлении оси строки.
17.2 Пример 49
.item1 { align-self: start }
.item2 { align-self: center }
.item3 { align-self: end }
Атрибутыalign-selfОпределяет выравнивание в направлении оси столбца.
17.3 Пример 50
.item1 {
justify-self: center
align-self: center
}
Элемент 1 расположен посередине между осью строки и осью столбца.
18 Выравнивание дорожек сетки
В контейнере сетки дорожки сетки могут быть выровнены вдоль оси несколькими способами.
Атрибутыalign-contentиспользуется для определения выравнивания дорожек сетки вдоль оси строки, а свойствоjustify-contentИспользуется для определения выравнивания дорожек сетки вдоль оси колонны. И соответственно поддерживают следующие свойства:
- normal
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
- baseline
- first baseline
- last baseline
18.1 Пример 51
.grid {
width: 100%;
height: 300px;
grid-template-columns: repeat(4, 45px);
grid-template-rows: repeat(4, 45px);
grid-gap: 0.5em;
justify-content: start;
}
Дорожка столбца выравнивается по началу оси строки.startявляется значением по умолчанию.
18.2 Пример 52
.grid {
justify-content: end;
}
Дорожка столбца выравнивается по концу оси строки.
18.3 Пример 53
.grid {
justify-content: center;
}
Дорожка столбца выравнивается по середине оси ряда.
18.4 Пример 54
.grid {
justify-content: space-around;
}
Распределите дополнительное пространство равномерно по обеим сторонам каждой колонки.
18.5 Пример 55
.grid {
justify-content: space-between;
}
Распределите дополнительное пространство равномерно от столбца к столбцу.
18.6 Пример 56
.grid {
justify-content: space-evenly;
}
Распределите дополнительное пространство равномерно между столбцами и между столбцами и границами.
18.7 Пример 57
.grid {
align-content: start;
}
Дорожка строки выравнивается по началу оси столбца, свойствоstartявляется значением по умолчанию.
18.8 Пример 58
.grid {
align-content: end;
}
Дорожка строки выравнивается по концу оси столбца.
18.9 Пример 59
.grid {
align-content: center;
}
След строки выровнен на средней точке оси колонны.
18.10 Пример 60
.grid {
align-content: space-around;
}
Дополнительное пространство равномерно распределяется по обеим сторонам каждого ряда.
18.11 Пример 61
.grid {
align-content: space-between;
}
Равномерно распределяйте лишнее пространство от ряда к ряду.
18.12 Пример 62
.grid {
align-content: space-evenly;
}
Распределите дополнительное пространство равномерно между рядами и между рядами и границами.
Эпилог
Этот учебник представляет собой относительно подробное введение в сетки, но не является полным техническим документом. Если вы хотите узнать больше о соответствующем контенте, рекомендуем посетитьСеть разработчиков Mozillaа такжеW3CСетчатый документ.
Из-за ограниченных возможностей в переводе неизбежно много ошибок, прошу меня простить!
Большое спасибо оригинальному авторуJonathan SuhОтличная работа по верстке данной статьи, изготовлению образцов, редактированию текста и т.д.
Чтобы получить наилучшие впечатления от чтения, посетите учебники, отформатированные следующим образом:
[Образец версии] Изучите CSS Grid Layout