CSS grid — скорочення для властивостей ґріда

Властивість grid являє собою набір горизонтальних і вертикальних ліній, які перетинаються - один набір визначає стовпці, а інший рядки. Елементи можуть бути поміщені в сітку, відповідно рядках і стовпцях.

grid - це універсальна властивість для скороченого запису:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow
• grid-column-gap
• grid-row-gap

Одночасно Ви можете вказати лише явні (grid-template-rows, grid-template-columns, grid-template-areas) або неявні (grid-auto-rows, grid-auto-columns, grid-auto-flow) властивості для сітки. Необов'язкові під-властивості (grid-column-gap, grid-row-gap) отримують своє значення без задання, навіть якщо їх не було прописано.

Наприклад, два шматки стилів, написаних нижче - ідентичні:

.area {
  grid: row 2fr / max-content;
}

.area {
  grid-auto-flow: row;
  grid-auto-rows: 2fr;
  grid-auto-columns: max-content;
}

Властивість grid також приймає більш складний, але досить зручний синтаксис для налаштування всього одночасно. Ви вказуєте grid-template-areas, grid-template-rows i grid-template-columns, а всі інші під-властивості автоматично отримують свої значення без задання. Ви можете вказувати назви рядків та розмірів доріжок у відповідності з їхніми сітками.

Це найпростіше описати на прикладі:

.area {
  grid: [row1-start] "header header header" 1fr [row1-end]
          [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto;
}

.area {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

Функція repeat()

Ви можете використовувати функцію repeat(), щоб повторювати визначення рядка або стовпця стільки разів, скільки потрібно. Перший параметр визначає, скільки випадків визначення має бути показано, а другий параметр визначає список доріжок.

У цьому прикладі ми використовуємо функцію repeat(), щоб вказати, скільки стовпців слід відображати.

Застосування значення автоматичного потоку (auto-flow) для рядку є еквівалентом використання grid-auto-flow: row:

grid: auto-flow 20vh / repeat(3, 30vw);

ASCII-синтаксис

Властивість grid-template-areas дозволяє вам визначати області шаблонів за допомогою присвоєння певної назви. Це робить надзвичайно простою візуалізацію вашої сітці.

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

Як це працює: ви створюєте текстову сітку з використанням названих областей сітки. Назви сітчастих областей надаються у вигляді ряду рядків, кожен з яких представляє інший рядок. Наприклад:

grid: "header header header"
      "nav article sb"
      "footer footer footer" / 20% 1fr 15%;

правити

Загальний опис

правити

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

Синтаксис

grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>;

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

none

Встановлює всі під-властивості до їх початкових значень

автор: Svitlana

правити

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

Налаштовує grid-template-rows та grid-template-columns відповідно до вказаних значень, а всі інші під-властивості до їх початкових значень

автор: Svitlana

правити

<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]

Приймає всі ті самі значення, що і grid-auto-flow, grid-auto-rows та grid-auto-columns, відповідно. Якщо під-властивість grid-auto-columns пропущена, вона отримує значення, прописане для grid-auto-rows. Якщо обидві властивості пропущені, вони отримують свої початкові значення.

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	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="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

.wrap {
    display: grid;
    grid: auto-flow 60px / repeat(3, 1fr);
    gap: 4px;
}

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

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<p>Щоб розмістити так div-и, ми використали <strong>grid-template-columns</strong> (для стовпців) та <strong>grid-template-rows</strong> (і рядків). Простіше кажучи, прописали: має бути 5 рядків та 2 стовпці:</p>

<p><code>grid-template-rows: repeat(5, 60px);<br>grid-template-columns: repeat(2, 60px);</code></p>

<p>Властивість <strong>grid</strong> допомагає привести цей запис в більш короткий вигляд:</p>

body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: #252525;
}

code {
  padding: 6px;
  background-color: #f1f1f1;
  font-family: monospace;
  display: inline-block;
  color: #000;
}

#container {
  display: grid;
  grid: repeat(5, 60px) / repeat(2, 60px);
/*   grid-template-rows: repeat(5, 60px);
  grid-template-columns: repeat(2, 60px); */
  float: left;
  margin-right: 16px;
}

#container > div {
  background-color: green;
  width: 50px;
  height: 50px;
}

<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 class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

.box {
  display: grid;
  grid: auto-flow 20vh / repeat(3, 30vw);
  grid-gap: 10px;
}

.box .item {
  background-color: #eee;
  color: #666;
  font-weight: 700;
  font-size: 4vw;
  padding: 10px;
  box-shadow: 0 0 2px 0 #000;
  text-align: center;
  padding-top: 25%;
}

<div class="cards">
    <article>Картка 1</article>
    <article>Картка 2</article>
    <article>Картка 3</article>
    <article>Картка 4</article>
    <article>Картка 5</article>
</div>

.cards {
    display: grid;
    /* стільки колонок, скільки влізе, але не вужчих за 200px */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.cards article {
    padding: 1.5rem;
    background: #eef3f8;
    border: 1px solid #cfdae6;
    border-radius: 6px;
}