От автора: это полезный нюанс, который вы должны знать о CSS-сетке. Я уверен, что это само собой разумеется для многих из вас, но я пишу об этом, потому что лично для меня это не казалось таким очевидным не так уж давно. Давайте рассмотрим этот аспект подробнее.
Мы должны учитывать две вещи:
Область сетки, созданная родительским элементом с помощью display: grid;
Сам элемент, такой как div, который назначен для этой области сетки.
Предположим, у нас создана мегапростая CSS сетка следующим образом:
|
1 2 3 4 5 |
.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; и использовать его для выравнивания.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
