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.
Чтобы разместить элемент, вы можете обратиться к номерам строк или использовать ключевое слово "span", чтобы определить, сколько столбцов будет охватывать элемент.
Пример
Сделайте так, чтобы "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-end и grid-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 также можно использовать для присвоения имен элементам сетки.
Header
Menu
Main
Right
Footer
На именованные элементы сетки можно ссылаться с помощью свойства 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; }
}
