Що робить властивість grid-template?

CSSJunior~1 хв читання

grid-template - це шорткат, який об'єднує три властивості в одній:

Тобто за його допомогою можна одночасно задати рядки, колонки і іменовані області сітки.

Приклад:

css

.container {
  display: grid;
  grid-template:
    "header header" 100px
    "sidebar main"  1fr
    "footer footer" 80px
    / 200px 1fr;
}

Еквівалентно трьом окремим записам:

css

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

grid-template-rows: 100px 1fr 80px;
grid-template-columns: 200px 1fr;

Підсумок: grid-template - зручний комбінований запис, який дозволяє однією властивістю задати структуру рядків, колонок і областей у Grid.

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.