Від автора: це корисний нюанс, який ви повинні знати про CSS-сітці. Я впевнений, що це само собою зрозуміло, що для багатьох з вас, але я пишу про це, тому що особисто для мене це не здавалося таким очевидним не так вже давно. Давайте розглянемо цей аспект детальніше.
Ми повинні враховувати дві речі:
Область сітки, створена батьківським елементом за допомогою display: grid;
Сам елемент, такий як div, який призначений для цієї області сітки.
Припустимо, у нас створена мегапростая CSS сітка наступним чином:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
Якщо ми розмістимо тут чотири елемента сітки, ось як це буде виглядати через Firefox DevTools:
Тепер давайте візьмемо один з цих елементів, сітки і задамо для нього background-color:
Область сітки і елемент мають однаковий розмір! На те є дуже конкретна причина. Це пов’язано з тим, що значення за замовчуванням для justify-items та align-items — stretch. Значення stretch буквально розтягує елемент, щоб він заповнив всю область сітки. Але є кілька причин, за якими елемент може не заповнити всю область сітки:
Для властивостей батьківського елемента сітки justify-items або align-items може бути задане значення відмінне від stretch.
Для властивостей елемента сітки align-self або justify-self може бути задане значення відмінне від stretch.
Для елемента сітки може бути застосовано обмеження по висоті або ширині.
Подивіться наступний приклад:
Кому до цього є діло?
Ну, не знаю, просто корисно знати, що розміщення елемента в області сітки — це лише відправна точка для макета. За замовчуванням він заповнює область, але не обов’язково. Він може бути менше або більше. Він може бути вирівняний по кожному з кутів або по центру.
Можливо, найцікавішим обмеженням є те, що ви не можете варіювати властивості область сітки. Якщо ви хочете скористатися вирівнюванням, наприклад — ви автоматично втрачаєте можливість заповнювати всю область сітки. Таким чином, ви не можете застосувати фон і бути впевненими, що він заповнить всю область сітки. Якщо вам потрібно використовувати вирівнювання і застосувати фон, вам потрібно залишити для цього елемента значення stretch, а потім створити новий елемент з display: grid; і використовувати його для вирівнювання.
