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 и span 3 столбцов:
.item1 {
grid-column: 1 / span 3;
}
Пример
Сделать, чтобы .item2 было, начало в колонке 2 и span 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:
.item1 {
grid-area: 1 / 2 / 5 / 6;
}
Пример
Сделайте .item8 старт линии строки 2 и линии столбца 1, и охватить 2 строки и 3 колонки:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Именование элементов сетки
Свойство grid-area также можно использовать для присвоения имен элементам сетки.
Заголовок
Меню
Главная
Справа
Подвал
Именованные элементы сетки могут быть grid-template-areas свойством
контейнера решетки.
Пример
Пункт 1 получает имя "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 / 3 / 4; }
.item3 { grid-area: 2 / 1 / 2 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 3 / 2; }
.item6
{ grid-area: 2 / 3 / 2 / 4; }
}