Області сітки CSS і елементи, які для них призначені, не обовязково повинні бути одного розміру

16

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

Ми повинні враховувати дві речі:

Область сітки, створена батьківським елементом за допомогою display: grid;

Сам елемент, такий як div, який призначений для цієї області сітки.

Припустимо, у нас створена мегапростая CSS сітка наступним чином:

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}

Якщо ми розмістимо тут чотири елемента сітки, ось як це буде виглядати через Firefox DevTools:

Області сітки CSS і елементи, які для них призначені, не обовязково повинні бути одного розміру

Тепер давайте візьмемо один з цих елементів, сітки і задамо для нього background-color:

Області сітки CSS і елементи, які для них призначені, не обовязково повинні бути одного розміру

Область сітки і елемент мають однаковий розмір! На те є дуже конкретна причина. Це пов’язано з тим, що значення за замовчуванням для justify-items та align-items — stretch. Значення stretch буквально розтягує елемент, щоб він заповнив всю область сітки. Але є кілька причин, за якими елемент може не заповнити всю область сітки:

Для властивостей батьківського елемента сітки justify-items або align-items може бути задане значення відмінне від stretch.

Для властивостей елемента сітки align-self або justify-self може бути задане значення відмінне від stretch.

Для елемента сітки може бути застосовано обмеження по висоті або ширині.

Подивіться наступний приклад:

Області сітки CSS і елементи, які для них призначені, не обовязково повинні бути одного розміру

Кому до цього є діло?

Ну, не знаю, просто корисно знати, що розміщення елемента в області сітки — це лише відправна точка для макета. За замовчуванням він заповнює область, але не обов’язково. Він може бути менше або більше. Він може бути вирівняний по кожному з кутів або по центру.

Можливо, найцікавішим обмеженням є те, що ви не можете варіювати властивості область сітки. Якщо ви хочете скористатися вирівнюванням, наприклад — ви автоматично втрачаєте можливість заповнювати всю область сітки. Таким чином, ви не можете застосувати фон і бути впевненими, що він заповнить всю область сітки. Якщо вам потрібно використовувати вирівнювання і застосувати фон, вам потрібно залишити для цього елемента значення stretch, а потім створити новий елемент з display: grid; і використовувати його для вирівнювання.