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)

автор: Svitlana

правити

<line-name>

назва іменованого рядку

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
Базова підтримка	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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">
    <div>25%</div>
    <div>100px</div>
    <div>auto</div>
</div>

.box {
    display: grid;
    grid-template-columns: 25% 100px auto;
    gap: 4px;
}

.box div {
    background: #0172ad;
    color: #fff;
    padding: 8px;
}