Явне розміщення елементів за лініями сітки

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

Що таке лінії сітки

• Лінії сітки нумеруються, починаючи з 1, від верхнього та лівого краю сітки;
• Кожен трек рядка або стовпця обмежений двома лініями сітки: одна на початку, інша в кінці;
• Якщо у вашій сітці три стовпці, буде чотири вертикальні лінії сітки з номерами від 1 до 4; те саме стосується рядків.

Використання grid-column та grid-row

• Властивість grid-column дозволяє вказати, де елемент повинен починатися та закінчуватися по горизонталі, посилаючись на номери ліній сітки;
• Властивість grid-row працює аналогічно по вертикалі;
• Використовуйте скорочений синтаксис: grid-column: start / end; та grid-row: start / end;;
• Щоб елемент займав кілька треків, встановіть кінцеве значення на більший номер лінії сітки.

Приклад:

• grid-column: 1 / 3; розміщує елемент, починаючи з лінії сітки 1 і закінчуючи перед лінією 3 (займає два стовпці);
• grid-row: 2 / 4; розміщує елемент, починаючи з лінії сітки 2 і закінчуючи перед лінією 4 (займає два рядки).

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

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

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

Вибирайте явне розміщення, якщо потрібно:

• Контролювати точну позицію та охоплення елементів сітки;
• Створювати складні, журнальні макети;
• Забезпечити послідовність на різних розмірах екранів.

Використовуйте неявне розміщення, якщо:

• Маєте простий, однорідний макет;
• Працюєте з динамічною або невідомою кількістю елементів;
• Хочете покластися на автоматичне розміщення браузера для ефективності.