Дефолтная высота контейнера для 'display: grid'?

Question

[Shimpanze]

Когда я задаю контейнеру правило display: grid, он ведёт себя как «блок» и занимает всю доступную ширину. А как, он занимает всю доступную высоту ПО ДЕФОЛТУ?

Что, по этому поводу, говорит спецификация?

Comments

[Ankhena]

А как, он занимает всю доступную высоту ПО ДЕФОЛТУ?

Никак.

Если его родитель не флекс и не грид. Но это уже не очень дефолт.

Самое простое - это создать песочницу с кодом (онлайн сервисы или файлики на вашем компе), задать цвет, обводку да и попробовать-посмотреть что будет.

[Shimpanze]

Ankhena, Я так, естественно, пробовал. Не попробуешь все браузеры на свете. Поэтому и интересует, что говорит по этому поводу спецификация, делать согласно ей, а остальное на совести браузеров.

[Ankhena]

Shimpanze, а по какой логике вы тут спрашиваете что говорит спецификация, а не читаете её? :) :) :)

[Shimpanze]

Ankhena, Я не могу понять где её читать...

[Ankhena]

Shimpanze,
Cпека https://www.w3.org/TR/css-display-3/
Осознавать проще читая MDN
https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...
https://developer.mozilla.org/ru/docs/Learn/CSS/CS...

По умолчанию высота блочных элементов 0 и растягивается по содержимому.

Answer 1

[Николай Шабалин]

Shimpanze, https://www.w3.org/TR/css-grid-2/
по умолчанию высота работает как для простого display: block как в <div>. Так как по сути указывая display: grid, мы указываем display: grid block: будь внутри с гридовым контекстом, а внешее блочным.

Вы также можете указать display: grid inline, тогда по умолчанию блок схлопнется "по тексту".

А ещё точнее с учётом бокосовой модели с учётом контента, паддингов, бордеров и марджинов.

Comments

[Shimpanze]

Исчерпывающе. Большое спасибо!