Що таке grid у CSS3?

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

1. Гнучке керування рядками та колонками: можна задавати як фіксовані, так і автоматичні розміри.
2. Зручне позиціонування елементів: можна розташовувати елементи у будь-якій області сітки.
3. Підтримка адаптивних дизайнів: сітка легко підлаштовується до різних розмірів екранів.

CSS Grid використовує контейнери та елементи сітки. Контейнер сітки це батьківський елемент, який визначає структуру сітки за допомогою властивості display: grid . Елементи всередині контейнера стають частиною цієї сітки та підкоряються її правилам.

Для завдання рядків і стовпчиків використовується властивість grid-template, яка визначає структуру сітки. Кожну комірку можна налаштовувати індивідуально, включаючи її розміри та позицію.

Приклад використання CSS Grid

.grid-container < display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto; gap: 10px; padding: 20px; >.grid-item

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

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

Додаткові можливості

CSS Grid дозволяє поєднувати фіксовані та автоматичні розміри. Наприклад, використовуючи minmax() , можна задавати мінімальні та максимальні розміри для колонок або рядків, що спрощує створення адаптивних макетів.

Сітка може бути вбудована з іншими технологіями, такими як Flexbox, для створення складних макетів, де одні області сторінки використовують сітку, а інші гнучку модель Flexbox.

2.28.

W3C описує модуль CSS Grid Layout як систему двовимірного макета, оптимізованого для дизайну інтерфейсу користувача. та розташуванням можна за допомогою спеціальних властивостей модуля.

Крім того, завдяки своїй здатності явно розміщувати елементи в сітці, Grid Layout дозволяє кардинально перетворювати структуру візуального макета (що відображається на екрані), не вимагаючи відповідних змін розмітки.

Хоча багато макети можуть бути відображені за допомогою Grid або Flexbox, у кожного є свої особливості. простий висхідний підхід до макету може використовувати систему переносу рядків на основі розмір контенту для управління своєю вторинною віссю і спирається на базову ієрархію розмітки для побудови складніших макетів.

У всіх прикладах буде розглянуто стандартний синтаксис. Якщо ви захочете адаптувати синтаксис для IE10-11 та Microsoft Edge, скористайтесь посібником Microsoft Developer Network Grid layout.

Список поточних багів та неповних реалізацій наведено у статті Rachel Andrew GridBugs.

Посібник з CSS Grid Layout

• Зміст:
• 1. Концепція сітки та основні поняття
• 2. Створення контейнера-сітки: значення grid та inline-grid властивості display
• 3. Визначення сітки
• 3.1. Як задати кількість рядків та стовпців: властивості grid-template-rows та grid-template-columns
• 3.2.Іменовані області: властивість grid-template-areas
• 3.3. Скорочений запис явного оголошення сітки: властивість grid-template
• 3.4. Неявна сітка
• 3.4.1. Автоматичне створення доріжок сітки: властивості grid-auto-rows та grid-auto-columns
• 3.4.2. Автоматичне розміщення: властивість grid-auto-flow
• 3.5. Скорочений запис сітки: властивість grid
• 4. Елементи сітки
• 5. Розміщення та переупорядкування елементів сітки
• 5.1. Розміщення за допомогою ліній сітки: властивості grid-row-start, grid-column-start, grid-row-end та grid-column-end
• 5.2. Скорочений запис властивостей розміщення елементів сітки: властивості grid-row, grid-column та grid-area
• 6. Вирівнювання елементів сітки та проміжки між елементами
• 6.4. Проміжки між елементами сітки: властивості row-gap, column-gap та gap

Підтримка браузерами

IE: 10.0 -ms-
Edge: 16.0, 12.0 -ms-
Firefox: 52.0
Chrome: 57.0
Safari: 10.1
Opera: 44.0
iOS Safari: 10.3
Opera Mini: —
Android Browser: 67.0
Chrome для Android: 70.0

1. Концепція сітки та основні поняття

Сітка (grid) являє собою набір горизонтальних і вертикальних ліній, що перетинаються, ділять простір grid-контейнера на області сітки, в які можуть бути поміщені елементи сітки.

Лінії сітки (grid lines) - це невидимі горизонтальні та вертикальні розділові лінії, вони існують по обидва боки від рядка та стовпця. На них можна посилатися за числовим індексом (використовуючи властивості grid-column-start, grid-column-end, grid-row-start і grid-row-end) або імені, заданому в CSS-коді. Числові індекси сітки залежать від стилю мови, тому першим стовпцем може бути як найлівіший, так і правий стовпець.

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

Доріжка сітки (grid track) — простір між двома сусідніми лініями сітки, використовується визначення чи стовпця, чи рядки сітки. Доріжка йде від краю контейнера до іншого, розмір залежить від розташування ліній сітки, які її визначають. Доріжки сітки аналогічні стовпцям та рядкам таблиці. За умовчанням суміжні доріжки щільно прилягають одна до одної, встановити відстань між ними можна за допомогою властивостей row-gap, column-gap і gap.

Осередок сітки (grid cell) — простір, обмежений чотирма лініями сітки, аналогічно осередку таблиці. Комірка сітки — це область, де можна розмістити контент. Це найменша одиниця сітки, яку можна посилатися при позиціонуванні елементів сітки. До осередків сітки не можна звертатися безпосередньо за допомогою CSS-властивостей.

Область сітки (grid area) - Прямокутна область, обмежена чотирма лініями сітки і що складається з однієї або декількох сусідніх осередків. Область може бути такою ж маленькою, як одна комірка, або такою ж великою, як усі комірки сітки. Область сітки може бути задана явно за допомогою властивості grid-template-areas, за замовчуванням на неї посилаються лінії сітки, що обмежують.

Елементи сітки (grid items) - окремі елементи, які призначаються області сітки (або осередку сітки). Кожен контейнер-сітка включає нуль та більше елементів сітки; кожен дочірній елемент контейнера-сітки автоматично стає елементом сітки.

Доріжки, осередки та області сітки побудовані з ліній сітки. Проте не потрібно, щоб всі області сітки були заповнені елементами, цілком можливо, що деякі або навіть більшість клітинок сітки будуть порожніми від будь-якого вмісту. Також можливо, що елементи сітки будуть перекривати один одного, або визначати області сітки, що перекриваються.

2. Створення контейнера-сітки: значення grid та inline-grid властивості display

Для створення макету на основі сітки необхідно визначити контейнер-сітку.

Контейнер-сітка (grid container) — це блок, який встановлює контекст форматування за типом сітки, тобто створює область із сіткою, а дочірні елементи розташовуються відповідно до правил компонування сітки, а не блокової компонування. Коли ви визначаєте контейнер сітки за допомогою display: grid або display: inline-grid , ви створюєте новий контекст форматування вмісту цього контейнера, який впливає лише на дочірні елементи сітки.

Donec in tellus vel neque sollicitudin lobortis sed a arcu. Quisque eu arcu vel eros pretium posuere. Quisque semper nunc ligula, eget laoreet nibh faucibus vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra lorem libero, eget ultricies risus vulputate eu. Donec pretium in risus a suscipit.

Контейнер-сітка буває двох видів: звичайний display: grid та вбудований display: inline-grid. Перший генерує grid-контейнер рівня блоку, другий – grid-контейнер рівня рядка. Контейнери-сітки не є блочними контейнерами, тому деякі CSS-властивості не працюють у контексті макету сітки:

• float та clear ігноруються елементами сітки (але не самим контейнером-сіткою).
• vertical-align не впливає елементи сітки.
• Псевдоелементи :: first-line та :: first-letter не застосовуються до контейнера-сітки та його нащадків.
• Якщо контейнер-сітка є контейнером рівня рядка display: inline-grid і для нього задані обтікання або абсолютне позиціонування, значення властивості display, що обчислюється, буде grid .

3. Визначення сітки

Коли ви створюєте контейнер-сітку, стандартна сітка має один стовпець і один рядок, які займають повний розмір контейнера. Для розділення контейнера-сітки на стовпці та рядки використовуються властивості grid-template-columns , grid-template-rows та grid-template-areas . За допомогою цих властивостей можна визначити сітку очевидно.

Остаточна сітка може виявитися більшою через елементи сітки, розміщені поза явною сіткою; у цьому випадку будуть створені неявні доріжки, розмір цих неявних доріжок визначатиметься властивостями grid-auto-rows та grid-auto-columns.

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

3.1. Як задати кількість рядків та стовпців: властивості grid-template-rows та grid-template-columns

Кількість рядків / стовпців задається за допомогою властивостей grid-template-rows та grid-template-columns .

Властивості не успадковуються.

3.1.1. Відносні, абсолютні одиниці та відсоткові значення для визначення доріжок сітки (довжина)

Розміри доріжок сітки можна задавати за допомогою позитивних значень, використовуючи відносні одиниці довжини - наприклад, em, vh, vw; абсолютні одиниці довжини - px; та відсотки %. Розміри % обчислюються від ширини або висоти контейнера-сітки.

3.1.2. Гнучкі розміри доріжок: одиниця виміру fr

fr – одиниця довжини, яка дозволяє створювати гнучкі доріжки. Не є одиницею виміру у звичайному її розумінні, тому може бути представлена ​​чи об'єднана коїться з іншими типами одиниць у виразах calc() . Загальний розмір фіксованих рядків або стовпців віднімається з доступного простору контейнера-сітки. Простір, що залишився, ділиться між рядками і стовпцями з гнучкими розмірами пропорційно їх коефіцієнту, наприклад:

.grid-container < display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; /* еквівалентно grid-template-columns: 25% 25% 25% 25%; */ >.grid-container < display: grid; grid-template-columns: 1fr 2fr 1fr; /* еквівалентно grid-template-columns: 25% 50% 25%; */ >

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

Якщо доступний простір нескінченний (тобто ширина чи висота контейнера-сітки не задані), доріжки сітки гнучкого розміру масштабуються за своїм вмістом, зберігаючи при цьому їх відповідні пропорції.

3.1.3. Мінімальні та максимальні розміри доріжок

Ключове слово max-content встановлює для доріжки розмір, який займає максимально необхідний простір з урахуванням вмісту сітки.

min-content дозволяє займати мінімальний простір, необхідний для цього вмісту, при цьому ширина елемента орієнтується на найдовше слово або найширше зображення.

Функція minmax(min,max) визначає діапазон розмірів, більший або рівний min і менший або рівний max . Якщо max то max ігнорується, а minmax (min, max) обробляється як min . Значення у fr можна встановлювати лише як максимальне.

minmax(довжина  або min-content  або max-content  або auto, довжина  або fr  або min-content  або max-content  або auto) minmax(довжина, довжина  або fr  або min-content  або max-content  або auto) minmax(довжина  або min-content  або max-content  або auto, довжина)

3.1.4. Автоматичні розміри

Значення auto орієнтується вміст елементів сітки однієї доріжки. Як мінімум, розглядається як мінімальний розмір елемента сітки, як визначено min-width або min-height. Як максимум, обробляється так само, як і max-content. Може розтягуватися за рахунок властивостей align-content та justify-content.

3.1.5. Відповідність вмісту

Розміри доріжок можна задавати за допомогою значення fit-content(довжина або %) , що є формулою min(maximum size, max(minimum size, argument)) , яка обчислюється як minmax(auto, max-content) , тобто auto . При цьому розмір доріжки обмежується значенням, вказаним у дужках, і якщо воно більше, ніж автоматичний мінімум.

3.1.6. Повтор рядків та стовпців

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

repeat (число  або auto-fill  або auto-fit, доріжка, що повторюється)

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

• Нотація repeat() може бути вкладеною.
• Значення auto-fill або auto-fit не можуть бути суміщені з min-content, max-content, auto, fit-content() або fr.

Синтаксис repeat() має декілька форм:

/*повтор доріжки*/ repeat(кількість повторень, ім'я доріжки? розмір доріжки + ім'я доріжки?) /*автозаповнення доріжок сітки*/ repeat(auto-fill або auto-fit, ім'я доріжки? фіксований розмір доріжки + ім'я доріжки?) / *фіксований повтор доріжки*/ repeat(кількість повторень, ім'я доріжки? фіксований розмір доріжки + ім'я доріжки?)

Використовуючи значення auto-fill, ви завжди отримаєте хоча б один стовпець, навіть якщо він з якоїсь причини не поміщається у контейнер-сітку.Якщо ви використовуєте auto-fit, то доріжки, які не містять елементи сітки, будуть скинуті.

3.2. Іменовані області: властивість grid-template-areas

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

Властивість не успадковується.

.grid-container < display: grid; grid-template-areas: "header header" "sidebar content" "sidebar content"; grid-template-columns: 150px 1fr; grid-template-rows: 50px 1fr 50px; >header < grid-area: header; >aside < grid-area: sidebar; >main

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

Усі рядки мають містити однакову кількість стовпців. Якщо ви хочете визначити лише деякі осередки як частину області сітки, ви можете використовувати одну або кілька . для заповнення цих безіменних осередків.При визначенні областей сітки ідентифікатори можна перераховувати через одиничний пробіл, без розриву рядка.

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

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

2. Розміщення елементів сітки за допомогою іменованих областей

.grid-container < display: grid; -template-rows: repeat(3, 200px); grid-template-columns: repeat(3, 1fr); post-1; >.post-2 < grid-area: post-2; >. post-3; 5 < grid-area: post-5;

3.3. Скорочений запис явного оголошення сітки: властивість grid-template

Властивість grid-template є скороченням для встановлення властивостей grid-template-rows, grid-template-columns і grid-template-areas в одному оголошенні.

Властивість не успадковується.

.grid-container < display: grid-template: repeat(3, 200px)/repeat(3fr, 1fr); -column-start: 1; grid-column-end: 3; 2; grid-column-start: 3;

.grid-container < display: grid; grid-template: [start] "post-1 post-1 post-2" [row2] [row2] "post-1 post-1 post-3" 200px [row3] [ row3] "post-6 post-5 post-4" 200px [row-end] / 1fr 1fr 1fr; grid-area: post-1; >.post-2 < grid-area: post-2;

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

3.4.

3.4.1. Автоматичне створення доріжок сітки: властивості grid-auto-rows та grid-auto-columns

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

За замовчуванням ці автоматично додані доріжки мають мінімальний необхідний розмір. доріжка сітки після явної сітки отримує перший заданий розмір тощо.

Властивості не успадковуються.

.grid-container < max-width: 710px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,100px); grid-auto-rows: 50px; >.post-1 < grid-column: 1/3; grid-row: 1/3; >.post-2 < grid-column: 3; grid-row: 1; >.post-3 < grid-column: 3; grid-row: 2; >.post-4 < grid-column: 3; grid-row: 3; >.post-5 < grid-column: 2; grid-row: 3; >.post-6

3.4.2. Автоматичне розміщення: властивість grid-auto-flow

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

Властивість не успадковується.

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

Мал. 4. Галерея зображень у стилі Masonry за допомогою автоматичного розміщення елементів сітки

.grid-container < max-width: 710px; margin: 10px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-auto-flow: dense; >.item5 < grid-column: span 2; grid-row: span 2; >.item6

3.5. Скорочений запис сітки: властивість grid

Властивість grid визначає всі явні grid-template-rows , grid-template-columns і grid-template-areas і всі неявні властивості сітки grid-auto-flow , grid-auto-rows і grid-auto-columns в одному оголошенні. Воно не скидає властивості row-gap/column-gap. Його синтаксис відповідає grid-template і додаткової синтаксичної формі для визначення автоматичного розміщення елементів сітки:

Шляхом явного завдання доріжок на одній осі (встановлюючи grid-template-rows або grid-template-columns і задаючи іншим значення none ), і задаючи, як автоматично повторювати доріжки на іншій осі (встановлюючи grid-auto-rows або grid-auto-columns і задаючи іншим auto).

Для grid-auto-flow також встановлюється одне із трьох допустимих значень. Всі інші підсвойства grid скидаються до початкових значень.

/* значення для grid-template */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax (100px, max-content) "b" 20%; grid: 100px/200px; grid: minmax (400px, min-content) / repeat (auto-fill, 50px); /* значення для grid-template-rows / [auto-flow && dense? ] grid-auto-columns? */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* значення для [ auto-flow && dense? ] grid-auto-rows? / grid-template-columns */ grid: auto-flow / 200px; grid: auto-flow dense/30%; grid: auto-flow 300px/repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax (20em, max-content);

4. Елементи сітки

Контейнер-сітка встановлює новий контекст форматування для елементів сітки, що обумовлює такі особливості:

• Для елементів сітки блокується їх значення властивості display. Значення display: inline-block обчислюється display: block , анонімні блоки тексту також займають всю ширину контейнера і утворюють розрив рядка.
• Розмір елемента сітки в межах блоку, що містить, визначається його областю сітки.
• Розрахунки елементів сітки для width: auto та height: auto залежать від їх значень align-self :
  align-self: normal; - незаміщувані елементи заповнюють область сітки, елементи, що заміщаються, використовують власні розміри;
  align-self: stretch; - обидві категорії елементів заповнюють область сітки;
  align-self: start/center і т.д. - Незаміщувані елементи встановлюють розміри відповідно до свого вмісту, елементи, що заміщаються, використовують власні розміри.
• Оскільки сусідні елементи сітки перебувають у незалежних областях сітки, то поля сусідніх елементів сітки margin не схлопываются.
• Браузери по-різному обробляють відсоткові значення властивостей margin і padding , тому рекомендується використовувати їх за заданні значень цих властивостей.
• Поля margin: auto; розширюються, поглинаючи вільний простір у відповідному вимірі, тому можуть використовуватись для вирівнювання елемента.

5. Розміщення та переупорядкування елементів сітки

Властивості розміщення дозволяють вільно упорядковувати та переупорядковувати вміст сітки таким чином, що візуальне подання може значно відрізнятися від порядку елементів у html-документі.

5.1. Розміщення за допомогою ліній сітки: властивості grid-row-start, grid-column-start, grid-row-end та grid-column-end

Кожен елемент сітки пов'язаний з областю сітки, яка визначає блок, що містить, для елемента сітки. Положення елементів сітки визначається розташуванням ліній сітки та діапазоном сітки - кількістю доріжок сітки, що займаються.За замовчуванням елемент сітки займає одну доріжку кожної осі. Тому можна опустити значення grid-column-end або grid-row-end.

Властивості розміщення на сітці - grid-row-start , grid-row-end , grid-column-start та grid-column-end та їх короткий запис grid-row , grid-column та grid-area дозволяють визначити розміщення елемента сітки, надавши будь-яку (або нуль) з наступних шести частин інформації:

.grid-container < display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 1fr 1fr 1fr; >.post-1 < grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; >.post-2 < grid-row-start: 1; grid-column-start: 3; >.post-3 < grid-row-start: 2; grid-column-start: 3; >.post-4 < grid-row-start: 3; grid-column-start: 3; >.post-5 < grid-row-start: 3; grid-column-start: 2; >.post-6

5.1.1. Іменовані лінії сітки

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

Ім'я лінії може бути будь-яким, при вказівці у значенні властивості воно полягає у квадратних дужках. Як ім'я лінії не можна використовувати слово span.

Мал. 6. Розміщення елементів сітки за допомогою іменованих ліній

.grid-container < display: grid; grid-template-rows: [start] 200px [row2] 200px [row3] 200px [row-end]; grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end]; >.post-1 < grid-row-start: span 2; grid-column-start: span 2; >.post-2 < grid-row-start: start; grid-column-start: col3; >.post-3 < grid-row-start: row2; grid-column-start: col3; >.post-4 < grid-row-start: row3; grid-column-start: col3; >.post-5 < grid-row-start: row3; grid-column-start: col2; >.post-6

Імена ліній додаються до неявних імен ліній сітки, створених властивістю grid-template-areas , набуваючи name-start і name-end . Імена ліній сітки ніколи не замінюють інші імена ліній сітки. Натомість вони просто накопичуються.

5.2. Скорочений запис властивостей розміщення елементів сітки: властивості grid-row, grid-column та grid-area

Властивості grid-row та grid-column є скороченими іменами для властивостей grid-row-start / grid-row-end та grid-column-start / grid-column-end відповідно.

Якщо задані два значення, перше (до косої межі) встановлюється для параметра grid-row-start/grid-column-start , друге - grid-row-end/grid-column-end . Якщо друге значення опущено, а перше вказано у форматі ідентифікатора користувача, то grid-row-end/grid-column-end також встановлюється в ім'я користувача сітки. В іншому випадку воно обчислюється в auto .

Для якості grid-area якщо вказано чотири значення, перше встановлюється для grid-row-start , друге - для grid-column-start , третє - для grid-row-end , четверте - для grid-column-end .

Якщо grid-column-end/grid-row-end не вказано, а grid-column-start/grid-row-start вказаний у формі імені користувача, то для grid-column-end/grid-row-end також встановлюється значення користувача імені лінії; інакше він встановлений на auto .

Коли grid-column-start опущено, а значення grid-row-start вказано у формі імені користувача, воно встановлюється для всіх чотирьох значень.

grid-row: a; grid-row: 1;

grid-area: a; grid-area: 2/4; ;

5.3. Перевпорядкування елементів сітки

Властивість order також застосовується до елементів сітки. Це впливає на їхнє автоматичне розміщення та порядок відмальовування.

6. Вирівнювання елементів сітки та проміжки між елементами

Для вирівнювання елементів сітки можна використовувати властивість margin, аналогічно, як працює ця властивість для блокових елементів.

За промовчанням елементи сітки розтягуються, щоб заповнити свою область сітки.

6.1. Вирівнювання за допомогою margin: auto

Під час розрахунку розмірів доріжок сітки margin: auto обробляються як 0 .

6.2.Вирівнювання по осі рядка

Елементи сітки можуть бути вирівняні у напрямку осі рядка (по горизонталі для LTR-мов) за допомогою властивості justify-self або властивості justify-items (заданого для контейнера-сітки).

6.3. Вирівнювання по осі стовпця

Елементи сітки можуть бути вирівняні в напрямку, перпендикулярному до осі рядка за допомогою властивості align-self або властивості align-items , заданого для контейнера-сітки.

6.4. Проміжки між елементами сітки: властивості row-gap, column-gap та gap

Властивості row-gap та column-gap (і їх скорочений запис gap ), якщо вони вказані у контейнері сітки, визначають проміжки між рядками та стовпцями сітки. При визначенні розміру запису кожен проміжок розглядається як додаткова порожня доріжка зазначеного розміру. Додатковий проміжок також може бути доданий між доріжками за рахунок властивостей justify-content та align-content.

Проміжки додаються лише між двома доріжками сітки, тобто вони не додаються перед першою та після останньої доріжки.

Властивості не успадковуються.

row-gap: 1.5em; column-gap: 10px; gap: 1%;