Сітка-шаблон-стовпці / сітка-шаблон-рядки - CSS-хитрощі

grid-template-rowsІ grid-template-columnsвластивості є основними властивостями CSS для створення макету сітки після того , як елемент контексту сітки ( display: grid;).

Існують також -ms-grid-columnsі -ms-grid-rows, які є старою версією IE цього. Можливо, ви захочете розглянути можливість автопрефіксації, щоб отримати їх чи ні, ваш дзвінок. Був також дивний період, коли вони були grid-definition-columnsі grid-definition-rows, але це вже не річ.

Ось приклад, отриманий з документації Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

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

Ці дві властивості підтримують список значень, розділених пробілами. Кожне значення визначатиме новий стовпець / рядок, встановлюючи розмірність. У результаті переліку з 4 значень з’являться 4 стовпці / рядки. Одне значення створить один стовпець / рядок.

Прийняті значення включають довжину (наприклад , pxчи em), відсотки, фракції ( fr; см нижче), auto(або fit-content), min-content, max-content, і minmax(), або repeat()функцію.

У наведеному вище прикладі коду це означає:

Стовпець 1 ( автоматичне ключове слово): Стовпець підходить до вмісту стовпця.
Стовпець 2 („100 пікселів“): Ширина стовпця становить 100 пікселів.
Стовпець 3 (“1fr”): Стовпець займає одну одиницю частки залишку місця.
Стовпець 4 (“2fr”): Стовпець займає дві одиниці частки залишкового простору.

Рядок 1 (“50 пікселів”): Висота рядка становить 50 пікселів.
Рядок 2 ("5em"): Рядок має 5 ems.
Рядок 3 ( ключове слово з мінімальним вмістом ): Рядок настільки малий, наскільки дозволений вміст.
Рядок 4 ( авто ключове слово): Рядок відповідає вмісту рядка.

повторити ()

repeat()Функція була спеціально розроблена для цього модуля. Це дозволяє визначити шаблон, повторений X разів. Подобається repeat(6, 1fr);. Скажімо, ви хочете зробити 12 стовпців однакової ширини, віддалених один від одного на відстань 1%; Ви могли б визначити 1fr repeat(11, 1% 1fr). Це те саме, що 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Підрозділ fr

frБлок може бути використаний для grid-rowsі grid-columnsзначення. Це означає «частка доступного простору». Подумайте про це як відсотки доступного місця, коли ви знімаєте стовпці / рядки фіксованого розміру та на основі вмісту. Як сказано в специфікації:

Розподіл дробового простору відбувається після того, як усі розміри рядків і стовпців на основі вмісту досягли свого максимуму.

Пов’язані

Наш найкращий ресурс для всього, що стосується сітки CSS, - це наш Повний посібник із CSS Grid.

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

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.