css властивість grid-template-columns
Властивісь grid-template-columns визначає стовпці сітки зі списком значень, розділених пробілами. Значення відображають розмір стовпчика.
Приклад використання:
grid-template-columns: 75px 1fr 50vw;
У цьому прикладі (результат вище) ми подаємо три значення для властивості grid-template-columns. Ці три значення вказують функцію визначення розміру доріжки, яка буде використовуватися для кожного з трьох стовпців. Якщо ми збільшимо, скажімо, перше значення, перший стовпець стане ширшим.
Одиниці vh та vw є одиницями довжини, які представляють 1% висоти вікна перегляду (для vh) або ширини (для vw). fr представляє частку вільного простору в контейнері сітки.
Іменовані рядки
Наприклад:
grid-template-columns: [col1-start] 50vw [col2-start] 1fr [col3-start] 10vw;
Іменовані лінії можуть спростити усвідомлення сітки, оскільки ви можете надати змістовні імена рядкам.
Названі рядки можуть бути явними або неявними:
- Явні іменовані рядки - це ті назви, які ви задаєте.
- Неявні названі рядки - це імена, які автоматично створюються властивості
grid-template-areas. Ці названі рядки створюються з названих областей у шаблоні. Для кожної названої сіткової області з ім'ямfoo(наприклад) створюються чотири неявно названих рядки. Дві імені, що називаютьсяfoo-start, є початковими рядками і стовпчиками в сітці та два іменіfoo-end- кінцевими.
Синтаксис
grid-template-columns: none | <track-list> | <auto-track-list>Властивість grid-template-columns може отримувати 2 значення:
<track-size>може бути довжиною, відсотком або часткою вільного місця в сітці (за допомогою
fr)<line-name>назва іменованого рядку
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridTemplateColumns |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| Базова підтримка | 57.0 |
Не підтримується |
52.0 |
10.1 |
44.0 |
16.0 |
| minmax() | 57.0 |
- |
52.0 |
44.0 |
10.1 |
12.0 |
| repeat() | 57.0 |
Не підтримується |
57.0 |
44.0 |
10.1 |
16.0 |
| fit-content() | 29.0 |
Не підтримується |
51.0 |
10.1 |
44.0 |
16.0 |
| Переглядач | |||
|---|---|---|---|
| Базова підтримка | 57.0 |
52.0 |
10.3 |
| minmax() | Не підтримується |
52.0 |
10.3 |
| repeat() | - |
57.0 |
10.3 |
| fit-content() | 57.0 |
51.0 |
10.3 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Приклад використання
Синтаксис
.box {
grid-template-columns: 25% 100px auto;
}