Page 64 - 6108

Grid lines – горизонтальні і вертикальні роздільники grid контейнера.
Ці лінії знаходяться по обидва боки від стовпчика або рядка. Розробник може
задати для даного елемента ім'я або числовий індекс, які може використовувати
далі в стилях. Нумерація починається з одиниці. Позиціонування елементів
відносно grid lines здійснюється за допомогою властивостей властивостей
grid-column-start, grid-column-end, grid-row-start та grid-row-
end.
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
В даному випадку елемент з class=’box1’ по вертикалі починається
від лінії line 1 і простягається до – line 4, відповідно займає три смуги-колонки.

По горизонталі він починається від лінії line 1 і закінчується на – line 3,
відповідно займає дві смуги-рядки.
Grid track – простір між двома суміжними grid лініями,
вертикальними або горизонтальними (рядки або стовпчики). Їх кількість на
grid-сітці та їх розміри задаються за допомогою властивостей grid-template-
rows та grid-template-columns.

grid-template-columns: ширина_колонки | auto
[ширина_колонки | auto];
grid-template-rows: висота_рядка | auto [висота_рядка |
auto]

ширина_колонки – задає ширину окремої колонки, може бути вказана в
px (фіксована ширина) або спеціальних одиницях fr
висота_рядка – задає висоту рядка, може бути вказана в px, em, rem або
спеціальних одиницях fr.
fr – це спеціальна одиниця вимірювання, яка не може бути менше
одиниці, а також не може приймати негативні значення. Вона визначає частку
вільного простору в grid-контейнері. Вона розраховується після того, як всі
інші значення, відмінні від fr, були розраховані.

auto – розмір смуги визначається розміром контенту, і буде
розрахований перед виначенням розміру fr.

grid-template-columns: 1fr 1fr 1fr /* вільний простір ділиться
на три рівні гнучкі смуги */

grid-template-columns: 2fr 1fr 1fr /*Доступний простір
розділений на чотири і призначається трьом гнучким смугам
пропорційно */

grid-template-columns: 500px 1fr 2fr /* Перша смуга 500px,
фіксована ширина відбирається з доступного простору. Решта
простору ділиться на три і призначається двом гнучким смугам
пропорційно*/
Великі grid-сітки з багатьма смугами можуть використовувати функцію
repeat() для скорочення при визначенні стовпчиків: