css властивість grid-template
Властивість grid-template є властивістю для скороченого запису властивостей визначення стовпців, рядків та областей сітки:
grid-template-rows,grid-template-columns,grid-template-areas.
Це може бути зручним способом оголошення цих властивостей без необхідності друкувати кожну з них окремо.
Ось приклад того, як використовується grid-template:
grid-template: 20vh 1fr 20vh / 15vw 1fr 10vw;
/* ідентично до цих правил: */
grid-template-rows: 20vh 1fr 20vh;
grid-template-columns: 15vw 1fr 10vw;
grid-template-areas: none; /* значення без задання */
Властивість grid-template встановлює значення для рядків та стовпців (розділяючи їх косою рискою). У цьому прикладі перший рядок становить 20vh, другий - 1fr, а третій - 20vh. Перший стовпець становить 15vw, другий стовпець - 1fr, а третій - 10vw.
Одиниці vh та vw є одиницями довжини, які представляють 1% висоти вікна перегляду (для vh) або ширини (для vw). fr представляє частку вільного простору в контейнері сітки.
ASCII-синтаксис
Властивість grid-template дозволяє вам визначати області шаблонів за допомогою присвоєння певної назви. Це робить надзвичайно простою візуалізацію вашої сітці.
Як це працює: ви створюєте текстову сітку з використанням названих областей сітки. Назви сітчастих областей надаються у вигляді ряду рядків, кожен з яких представляє інший рядок. Наприклад:
grid-template: "header header header" 60px
"article nav ads" 1fr
"footer footer footer" 60px
/ 1fr 20% 15%;
Наприклад:
Іменовані рядки
Наприклад:
grid-template: [header-start] "header header header" 60px [header-end]
[middle-start] "article nav ads" 1fr [middle-end]
[footer-start] "footer footer footer" 60px [footer-end]
/ 1fr 20% 15%;
Іменовані лінії можуть спростити усвідомлення сітки, оскільки ви можете надати змістовні імена рядкам.
Названі рядки можуть бути явними або неявними:
- Явні іменовані рядки - це ті назви, які ви задаєте.
- Неявні названі рядки - це імена, які автоматично створюються властивості
grid-template-areas. Ці названі рядки створюються з названих областей у шаблоні. Для кожної названої сіткової області з ім'ямfoo(наприклад) створюються чотири неявно названих рядки. Дві імені, що називаютьсяfoo-start, є початковими рядками і стовпчиками в сітці та два іменіfoo-end- кінцевими.
| Нотатка: | Зверніть увагу, що властивість Якщо ви віддаєте перевагу скиданням розмірів жолобів, скористайтеся властивістю |
Синтаксис
grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;Властивість grid-template може отримувати 3 значення:
noneвстановлює всі три властивості до їх початкових значень (
none)subgridвстановлює для
grid-template-rowsigrid-template-columnssubgrid, й дляgrid-template-areasзначення без задання<grid-template-rows> / <grid-template-columns>встановлює
grid-template-columnsіgrid-template-rowsвибрані значення відповідно йnoneдляgrid-template-areas
| Значення без задання: | none (для всіх трьох властивостей) |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridTemplate |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| grid-template | 57.0 |
11.0 |
54.0 |
10.1 |
44.0 |
16.0 |
| Переглядач | |||
|---|---|---|---|
| grid-template | 67.0 |
64.0 |
10.3 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Використання іменованих рядків
Приклад використання
Синтаксис
.box {
grid-template: 100px 1fr / 50px 1fr;
}