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

none

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

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

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

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

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

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





/* ідентично до цього */


grid-template-rows: auto-flow 20vh;


grid-template-columns: repeat(3, 30vw);


grid-template-areas: none; /* без задання */


grid-column-gap: 0; /* без задання */


grid-row-gap: 0; /* без задання */

Додаткові посилання