css властивість grid-template-columns


Властивісь 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;


}

Додаткові посилання