Грід утворює сітку зі рядків і стовпців, на перетині яких утворюються комірки. І для встановлення рядків і стовпців у Grid Layout використовують наступні властивості CSS3:

grid-template-columns: налаштовує стовпці;
Як значення властивості grid-template-columns передається ширина стовпців. Скільки ми хочемо мати в гріді стовпців, стільки і потрібно передати значень цій властивості.
grid-template-rows: налаштовує рядки
Властивості grid-template-rows передається висота кожного з рядків.
grid-column-gap і grid-row-gap: налаштовують відступи між стовпцями і рядками відповідно.
Якщо значення властивостей grid-column-gap і grid-row-gap співпадають, то замість них можна визначити одну властивість gap (раніше називалась grid-gap), яка встановить обидва відступи:

Елементи можуть бути розміщені на сітці всередині цих стовпців і рядків. Макет сітки CSS має такі особливості: якщо елементів більше, ніж комірок гріду, то утворюються додаткові рядки (як у випадку зі стовпцями). Тому, незважаючи на те, що вище були визначені налаштування тільки для двох рядків, насправді рядків у гріді буде три, причому, як видно на скріншоті, висота третього рядка необов’язково буде 5em, як у інших рядків, вона буде обчислюватись автоматично.

Фіксовані і гнучкі розміри смуг

Ви можете створити сітку з фіксованими розмірами смуг — наприклад, використовуючи пікселі. Ви також можете створити сітку з гнучкими розмірами, використовуючи відсотки або нову одиницю вимірювання — fr, призначену для цієї мети

Таким чином ми бачимо звичайний HTML, що складається з елементів, вкладених у свій зовнішній елемент. Але саме для наших цілей, зовнішній div — це контейнер гріду. Відповідно, усі елементи, вкладені в нього, будуть грід-елементами.

Але фактично це не буде повноцінним грідом, поки ми не застосуємо деякий CSS для нього. Ось код, який його створює: #grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2vw;
}

Це правило застосовується до зовнішнього div, оскільки йому було призначено ID #grid.

display: grid

Перетворює елемент на grid контейнер. Це все, що потрібно для створення гріду. Тепер у нас є грід-контейнер і грід-елементи. Значення grid створюють блочний контейнер. Ви також можете використовувати display: inline-grid, щоб створити строчний грід-контейнер. Або ж ви можете використовувати display: subgrid, щоб створити підсітку, це значення використовується на самих grid елементах.

grid-template-rows: 1fr 1fr 1fr

Вирівнює ряди в гріді. Кожне значення представляє розмір ряду. У цьому випадку всі значення рівні 1fr.

Те саме, що і вище, тільки визначає колонки в грідах.

grid-gap: 2vw

Встановлює розрив. Тобто проміжки між грід елементами. Тут ми використовуємо vw одиницю, яка відносна до ширини viewport, але також можемо використовувати 10px, 1em і т. д. Властивість grid-gap — це скорочення для властивостей grid-row-gap і grid-column-gap.

Ну, а інша частина коду просто призначає різні стилі грід елементам.

#grid > div {
font-size: 5vw;
padding: .5em;
background: gold;
text-align: center;
border:thin ridge navy;
}

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

Фракції. Одиниця гнучкості

Фракція — спеціальна одиниця вимірювання CSS Grid для створення адаптивного макету. Фракція — це частина цілого.

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

grid-template-columns: 1fr 1fr 1fr; вся доступна ширина розділиться на 3 частини і кожна колонка займе одну з цих частин.

grid-template-columns: 2fr 1fr 1fr; доступна ширина поділиться на 4 частини, перша колонка займе дві частини, а решта колонки — по одній частині.

Фракції можна комбінувати з точними одиницями вимірювання.

Отже, fr — це нова форма одиниці вимірювання, в основному асоційована з CSS Grid.

З одиницею гнучкості (fr) вам не потрібно нічого додатково перераховувати — взагалі не потрібно. Саме тому вона і є одиницею гнучкості — бути гнучкою.

Якщо ви вказуєте ширину в 1fr, то можете додавати стільки елементів, скільки потрібно, і вона про це подбає. Ширина кожного елемента буде рівномірно розподілена між дочірніми елементами.

Ви не прив’язані до цілих значень. Ви можете спокійно вказувати такі значення як: 1.5fr 3fr 4.5fr — загалом суть тут зрозуміла.

Але давайте заглибимось у математику. У нашому випадку, загальна частка дорівнює 1.5fr + 3fr + 4.5fr = 9fr

Якщо батьківський контейнер має ширину 900px

Перше значення, 1.5fr матиме ширину за розрахунком 1.5fr/9fr * 900px. Що в результаті дає 150px.

Друге значення, 3fr матиме ширину 3fr/9fr * 900px. Що дасть нам у результаті 300px.

Третє значення, 4.5fr матиме ширину 4.5fr/9fr * 900px. Що дасть у результаті 450px.

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

Функція repeat()

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

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

Ми можемо зробити так:

grid-template-rows: repeat(5, 1fr);

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

Перший параметр функції repeat представляє кількість повторень, а другий — визначення рядків або стовпців. Наприклад, властивість grid-template-columns: repeat(3, 8em); каже, що необхідно визначити 3 стовпці шириною по 8em.

Відповідно вираз grid-template-rows: repeat(4, 5em) визначає 4 рядки висотою по 5em.

Можна задавати повторення кількох стовпців і рядків:

.grid-container {
border: solid 2px #000;
display: grid;
grid-template-columns: repeat(2, 7em 8em);
grid-template-rows: 6em repeat(3, 5em);
}

У цьому випадку буде створено 4 стовпці: двічі будуть повторюватись два стовпці з шириною 7em та 8em.

У випадку з рядками буде створено 4 рядки. Причому перший матиме висоту 6em, а інші три — по 5em.

Функція minmax()

minmax() — це CSS-функція, що визначає діапазон розмірів, який більший або рівний min і менший або рівний max. Використовується в CSS Grids.

У специфікації CSS про функцію minmax(min, max) сказано, що вона визначає діапазон розмірів, які більші або рівні min і менші або рівні max.

Важливо пам’ятати, що значення типу 1fr не можна використовувати як значення min. Воно може бути використане лише як значення max.

При цьому така ситуація гірша, ніж коли min більший за max! Система ігнорує всю конструкцію, що містить таке оголошення.

.o-grid {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-gap: 1rem;
}

grid-auto-flow

grid-auto-flow: row;

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

grid-auto-flow: column;

Ключове слово, що вказує розміщувати елементи, заповнюючи по черзі кожен стовпець і додаючи нові стовпці за потреби.

Вправи.

Вправа 1. Створіть таблиці.

CSS-властивість grid-template-columns визначає імена ліній і розміри grid-стовпців. 1-й стовпець: min=150px, max=250px; 2-й і 3-й — по 1fr;

CSS-властивість grid-template-rows визначає імена ліній і розміри смуг grid-рядків. Висота рядків: 5em 5em 8em;

Вправа 2. Створіть таблиці.

CSS-властивість grid-template-columns визначає імена ліній і розміри grid-стовпців. 2-й стовпець: min=250px, max=350px; 1-й і 3-й — по 1fr;

CSS-властивість grid-template-rows визначає імена ліній і розміри смуг grid-рядків. Висота рядків: repeat(1,1fr);

Вправа 3

Властивість grid-auto-flow керує тим, як працює алгоритм автоматичного розміщення, точно вказуючи, як елементи потрапляють у сітку.

Назад Вперед Зміст