CSS Grid Item
1
2
3
4
5
Дочерние элементы (элементы)
контейнер Grid содержит элементысетки.
По умолчанию контейнер имеет один элемент сетки для каждого столбца, в каждой строке, но можно стиль элементов сетки таким образом, чтобы они будут охватывать несколько столбцов и/или строк.
Свойство столбца сетки:
Свойство grid-column определяет, на какой столбец (ы) поместить элемент.
Вы определяете, где будет запускаться элемент, и где будет заканчиваться элемент.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Примечание: Свойство Сетка-столбец является сокращенным свойством для свойств сетка- столбец-начало и столбцы сетки-конца.
Чтобы разместить элемент, можно ссылаться на номера строкили использовать ключевое слово «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 определяет, в какой строке поместить элемент.
Вы определяете, где будет запускаться элемент, и где будет заканчиваться элемент.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Примечание: Свойство Сетка-строка является сокращенным свойством свойств сетка- строка-начало и Сетка-конец строки.
Чтобы разместить элемент, можно ссылаться на номера строк или использовать ключевое слово «span» для определения количества строк, которые будут охватывать элемент:
Пример
Make "item1" start on row-line 1 and end on row-line 4:
.item1 {
grid-row: 1 / 4;
}
Пример
Сделайте «Item1» начните на рядке 1 и пролетайте 2 рядка:
.item1 {
grid-row: 1 / span 2;
}
The grid-area Property
grid-areaсвойство может использоваться в качестве сокращенного свойства для свойства Сетка-строка-начало, Сетка-столбец-начало, сетка-конец строки и Сетка-конец столбца.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Пример
Сделать "итем8" начать на строку-строка 1 и столбец-линия 2, и конец на строке-строка 5 и столбец Строка 6:
.item1 {
grid-area: 1 / 2 / 5 / 6;
}
Пример
Сделайте «итем8» старт на рядке-линия 2 и колонка-линия 1, и span 2 рядка и 3 колонки:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Именование элементов сетки
Свойство grid-area также можно использовать для присвоения имен элементам сетки.
Header
Menu
Main
Right
Footer
Именованные элементы сетки могут быть отнесены к свойству grid-template-areas контейнера Grid.
Пример
Item1 gets the name "myArea" and spans all five columns in a five columns grid layout:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Каждая строка определяется апострофами (' ')
Столбцы в каждой строке определяются внутри апострофов, разделенных пробелами.
Примечание: Знак периода представляет элемент сетки без имени.
Пример
Пусть "мяреа" span два столбца в сетке пять столбцов макета (знаки периода представляют элементы без имени):
.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; }
}