Элемент сетки CSS
1
2
3
4
5
Дочерние элементы (предметы)
Контейнер сетки содержит элементы сетки .
По умолчанию в контейнере есть один элемент сетки для каждого столбца в каждой строке, но вы можете настроить элементы сетки так, чтобы они охватили несколько столбцов и/или строк.
Свойство grid-column:
Свойство grid-columnопределяет, в какой столбец (столбцы) следует поместить элемент.
Вы определяете, где элемент начнется и где элемент закончится.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Примечание . Свойство grid-columnявляется сокращенным grid-column-startобозначением grid-column-endсвойств и .
Чтобы разместить элемент, вы можете обратиться к номерам строк или использовать ключевое слово «промежуток», чтобы определить, сколько столбцов будет охватывать элемент.
Пример
Заставьте «item1» начинаться со столбца 1 и заканчиваться перед столбцом 5:
.item1 {
grid-column: 1 / 5;
}
Пример
Заставьте «item1» начинаться с столбца 1 и охватывать 3 столбца:
.item1 {
grid-column: 1 / span 3;
}
Пример
Заставьте «item2» начинаться со столбца 2 и охватывать 3 столбца:
.item2 {
grid-column: 2 / span 3;
}
Свойство grid-row:
Свойство grid-rowопределяет, в какой строке разместить элемент.
Вы определяете, где элемент начнется и где элемент закончится.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Примечание . Свойство grid-rowявляется сокращенным grid-row-startобозначением grid-row-endсвойств и .
Чтобы разместить элемент, вы можете обратиться к номерам строк или использовать ключевое слово «span», чтобы определить, сколько строк будет охватывать элемент:
Пример
Сделайте так, чтобы «item1» начинался в строке 1 и заканчивался в строке 4:
.item1 {
grid-row: 1 / 4;
}
Пример
Заставьте «item1» начинаться с строки 1 и охватывать 2 строки:
.item1 {
grid-row: 1 / span 2;
}
Свойство grid-area
Свойство grid-areaможно использовать как сокращенное свойство для
свойств grid-row-start, grid-column-startи .grid-row-endgrid-column-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Пример
Сделайте так, чтобы «item8» начинался в строке 1 и строке столбца 2 и заканчивался в строке 5 и строке столбца 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Пример
Заставьте «item8» начинаться со строки строки 2 и строки столбца 1 и охватывать 2 строки и 3 столбца:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Именование элементов сетки
Это grid-areaсвойство также можно использовать для присвоения имен элементам сетки.
Заголовок
Меню
Главный
Правильно
Нижний колонтитул
На именованные элементы сетки можно ссылаться по grid-template-areasсвойству контейнера сетки.
Пример
Item1 получает имя «myArea» и охватывает все пять столбцов в сетке из пяти столбцов:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Каждая строка определяется апострофами (' ')
Столбцы в каждой строке определяются внутри апострофов, разделенных пробелом.
Примечание. Знак точки представляет элемент сетки без имени.
Пример
Пусть «myArea» охватывает два столбца в сетке из пяти столбцов (знаки точки представляют элементы без имени):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
Чтобы определить две строки, определите столбец второй строки внутри другого набора апострофов:
Пример
Сделайте так, чтобы "item1" занимал два столбца и две строки:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Пример
Назовите все элементы и создайте готовый к использованию шаблон веб-страницы:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
Порядок предметов
Макет сетки позволяет нам размещать элементы в любом месте.
Первый элемент в HTML-коде не обязательно должен отображаться как первый элемент в сетке.
1
2
3
4
5
6
Пример
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Вы можете изменить порядок для определенных размеров экрана, используя медиа-запросы:
Пример
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}