Порада: на всякий випадок именуйте лінії CSS Grid

33

Від автора: у будь CSS сітці у ліній є індекси, до яких можна звертатися для розміщення елементів . Цим лініям можна призначити імена, що спростить роботу і обслуговування сіткових макетів. Давайте поговоримо про це!

Grid гряде

Найбільш часто задається питання в уроках з сіток: «але коли я вже зможу скористатися ними?». Питання справедливе. Сітки настають, і дуже скоро.

«У березні 2017 року CSS Grid будуть підтримуватися в Firefox і Chrome.» — Ерік Мейер

Якщо ви ще не встигли познайомитися з цією технологією, саме час!

Номери рядків у сітці

При створенні сітки кожної лінії задається свій індекс:

Совет: на всякий случай именуйте линии CSS Grid

Зверніть увагу: якщо макету не встановлено властивість direction: rtl;, номери будуть починатися з лівого верхнього кута і будуть спускатися в правий нижній.

На ці номери можна посилатися для розміщення елементів, сітки:

.item {
grid-column: 2;
grid-row: 3;
}

У цьому прикладі наш елемент .item буде розташовуватися на перетині стовпця 2 та рядка 3:

Совет: на всякий случай именуйте линии CSS Grid

Явні назви ліній сітки

У складних сітках дуже важко посилатися на всі за номерами. Саме тому модуль Grid дозволяє задавати явні імена ліній при оголошенні колонок і рядків у сітці.

Розберемо приклад, як ті, які вже були в нашій серії статей. Наша стандартна сітка 3х3:

.grid-1 {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 60px 130px 50px;
grid-gap: 20px;
}

Колонок і рядків можна присвоїти імена ліній (ім’я може бути будь-яким) за допомогою квадратних дужок:

.grid-1 {
display: grid;
grid-template-columns: [start] 100px [centre-start] auto [last-column-start] 100px [finish];
grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end];
grid-gap: 20px;
}

Тепер елементи можна позиціонувати з допомогою імен, а не номерів:

.item {
grid-column: centre-start;
grid-row: header-start;
}

Кілька рекомендацій:

Імена можна підібрати під ваші описові потреби, добре продумайте імена, щоб запам’ятати області сітки.

Стандартні номери ліній нікуди не діваються, їх так само можна використовувати.

Одній лінії можна присвоїти кілька імен, наприклад: [main-end footer-start row-5] і т. д.

Навіть якщо ви задали імена ліній, ви не зобов’язані їх використовувати. Робіть це просто «на всякий випадок».

Неявні імена ліній сітки

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

Ми можемо оголосити чотири області сітки:

grid-1 {
/* ..інші стилі */
grid-template-areas: «header header header»
«main main sidebar»
«footer footer footer»;
}

Ці стилі дадуть нам наступну картинку:

Совет: на всякий случай именуйте линии CSS Grid

Якщо області сітки присвоїти ім’я header, ліній, з яких складається ця галузь автоматично привласнені імена. У рядкових ліній будуть імена header-start і header-end, а у вертикальних ліній будуть імена header-start і header-end. Це правило застосовується і до інших областях, лініях яких будуть надані імена main-start, main-end, sidebar-start і т. д.

Зверніть увагу: якщо розгорнути мою думку і поставити явні імена ліній у форматі header-start і header-end, буде створена область сітки header.

Ці імена ліній можна використовувати, як і раніше, для позиціонування елементів. Ці імена існують незалежно від інших заданих вами імен і стандартних номерів.

Підводимо підсумок

Ось і вся рада! Не забувайте: візьміть в звичку ставити імена ліній та областей для спрощеного управління і обслуговування.