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

Властивість grid-template є властивістю для скороченого запису властивостей визначення стовпців, рядків та областей сітки:

• grid-template-rows,

• grid-template-columns,

• grid-template-areas.

Це може бути зручним способом оголошення цих властивостей без необхідності друкувати кожну з них окремо.

Ось приклад того, як використовується grid-template:

grid-template: 20vh 1fr 20vh / 1fr 10vw 15vw;


/* ідентично до цих правил: */


grid-template-rows: 20vh 1fr 20vh;


grid-template-columns: 1fr 10vw 15vw;


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


                / 20% 1fr 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]


  / 20% 1fr 15%;

Іменовані лінії можуть спростити усвідомлення сітки, оскільки ви можете надати змістовні імена рядкам.

Названі рядки можуть бути явними або неявними:

• Явні іменовані рядки - це ті назви, які ви задаєте.

• Неявні названі рядки - це імена, які автоматично створюються властивості grid-template-areas. Ці названі рядки створюються з названих областей у шаблоні. Для кожної названої сіткової області з ім'ям foo (наприклад) створюються чотири неявно названих рядки. Дві імені, що називаються foo-start, є початковими рядками і стовпчиками в сітці та два імені foo-end - кінцевими.

правити

Нотатка

Зверніть увагу, що властивість grid-template не впливає на будь-які жолоби. Це дозволяє налаштовувати розмір жолобів для будь-якої батьківської сітки, що впливатиме і на її нащадків.

Якщо ви віддаєте перевагу скиданням розмірів жолобів, скористайтеся властивістю grid.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

grid-template: none |  subgrid | <grid-template-rows> / <grid-template-columns>;

Властивість grid-template може отримувати 3 значень:

none

встановлює всі три властивості до їх початкових значень (none)

автор: NagarD

правити

subgrid

встановлює для grid-template-rows i grid-template-columns subgrid, й для grid-template-areas значення без задання

автор: NagarD

правити

<grid-template-rows> / <grid-template-columns>

встановлює grid-template-columns і grid-template-rows вибрані значення відповідно й none для grid-template-areas

автор: NagarD

правити

Переглядачі

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

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

Переглядач
	57	52	10.1	44	16	—

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

Переглядач
	57	57	52	10.3

Приклади

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

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

.box {
    display: grid;
    grid-template: 100px 1fr / 50px 1fr;
    gap: 4px;
    height: 220px;
}

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