CSS Grid Елемент
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" починався з row-line 1 та column-line 2, і закінчувався row-line 5 та column-line 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Спробуйте самі »
Приклад
Зробіть так, щоб "item8" починався з row-line 2 та column-line 1, та охоплював 2 рядки і 3 стовпці:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Спробуйте самі »
Назви елементів сітки
Властивість grid-area також можна використовувати для призначення імен елементам сітки.
Header
Menu
Main
Right
Footer
На іменовані елементи сітки можна посилатися за допомогою властивості 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 / 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; }
}
Спробуйте самі »
