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

правити

Переглядачі

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

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

Переглядач
grid	57.0	52.0	10.1	44.0	16.0	11*

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

Переглядач
grid	67.0	64.0	10.3

Приклади

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

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