Можно ли совмещать css grid с другими display property's?

Question

[neulwert]

Я посмотрел уроки по размещению элементов в css grid. Возник вопрос: могу ли я свободно совмещать css grid с flex, block, inline-block и т.д. Например, написать display block. а дочернему элементу display: inline. Будет ли это лучшей практикой или мне лучше дочерним элементам тоже прописывать display:grid и размещать таким образом.

Comments

[WapSter]

Стили применяются там где они нужны и какие нужны.

Answer 1

[Арсений Матыцин]

Верстка предполагает сочетание элементов и свойств, работа которых не приведёт к багам. Любой блочный элемент может содержать блочные элементы и строчные. Строчные по хорошему только строчные. На уровне стилей, а на уровне html строчные не могу содержать блочные, это приведёт к ошибке.

Гриды и флексы — блочные.
Инлайновые флексы — условно строчные.

Answer 2

[Ankhena]

Вы можете сочетать разные свойства.
Но есть нюансы. Если родитель grid, то дочерние элементы не будут строчными, даже если вы им напишете display: inline. Например, если вы дочерним зададите inline-flex, то они станут просто flex.

С родительским флексом аналогично.

По поводу вкладывания элементов друг в друга в HTML. Это не зависит от блочности и строчности, так думали во времена HTML4, которые давно закончились.
Есть разные категории контента MDN категории контента и что во что можно вкладывать определяется спецификацией, 4м разделом. У каждого элемента написано к какой категории контента он относится и какие в него можно вкладывать.