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

Приклади

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

<header id="header">Header</header>

<article id="article">Article</article>

<nav id="nav">Nav</nav>

<div id="sb">Sidebar</div>

<footer id="footer">Footer</footer>

body { 
  display: grid;
  grid: "header header header"
        "nav article sb"
        "footer footer footer"
        / 20% 1fr 15%;
  grid-gap: 16px;
}

header, 
footer, 
article, 
nav, 
div {
  padding: 32px 16px;
  background: #eee;
  text-align: center;
  color: #666;
  font-weight: 700;
}

#header   { grid-area: header; }
#footer   { grid-area: footer; }
#article  { grid-area: article; }
#nav      { grid-area: nav; }
#sb       { grid-area: sb; }

<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;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

* {
  margin: 0;
  padding: 0;
}

.box {
  display: grid;
  grid-template: 1fr 3fr 1fr / 5fr 1fr 2fr;
  grid-gap: 16px;
  height: 100vh;
}

.item {
  background-color: tomato;
  color: white;
  font-size: 1.75em;
  text-align: center;
  font-family: monospace;
  padding: 16px;
}

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>grid-template</strong>:</p>

<p>Властивість grid-template встановлює значення для рядків та стовпців (розділяючи їх косою рискою). У цьому прикладі Ви можете задати значення у форматі: grid-template-rows / grid-template-columns (значення у fr).</p>

<input type="number" class="input" id="row0" min="1" value="1"><input type="number" id="row1" class="input" min="1" value="1"><input type="number" id="row2" class="input" min="1" value="1"><span class="divide">/</span><input type="number" id="col0" class="input" min="1" value="1"><input type="number" id="col1" class="input" min="1" value="1"><input type="number" id="col2" class="input" min="1" value="1"><span class="slash">

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
}

.input {
  margin-bottom: 36px;
  font-size: 14px;
  width: 75px;
}

.box {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-gap: 5px;
}

.box .item {
  background-color: tomato;
  color: white;
  font-size: 1.4em;
  font-family: monospace;
  padding: 16px;
  text-align: center;
}

.slash {
  font-size: 24px;
  font-weight: 700;
  margin: 0 5px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('grid-template', document.querySelector('#row0').value + 'fr ' + document.querySelector('#row1').value + 'fr ' + document.querySelector('#row2').value + 'fr / ' + document.querySelector('#col0').value + 'fr ' + document.querySelector('#col1').value + 'fr ' + document.querySelector('#col2').value + 'fr'));
}));

<div class="page">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

body {
    font-family: monospace;
    font-size: 15px;
}

.page {
    display: grid;
    grid-template:
        "hd hd  hd"   50px
        "nv main main" 140px
        "ft ft  ft"   50px
        / 110px 1fr 1fr;
    gap: 8px;
}

.page > * {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef6ff;
    border: 1px solid #0172ad;
}

header {
    grid-area: hd;
}

nav {
    grid-area: nv;
}

main {
    grid-area: main;
    background: gold;
}

footer {
    grid-area: ft;
}