В каких случаях работает display: inline-grid?

Question

[Underdoggit]

Всем привет!

Поискал статьи, очень много инфы по гридам, но всего пару строк про inline-grid.

1. В каких случаях и как он работает?
   
2. Есть дети, есть родитель, он работает не по аналогии с флексом?
   

Пишу родителю display: inline-grid и дети остаются так же в положении column.

Код на codepen

UPD: Причем, в реальном проекте в мобильной версии он работает, отрабатывает grid-gap и элементы расположены в строку, но только с мозилой с префиксом -moz.

Answer 1

[Евгений Вольф]

Пишу родителю display: inline-grid и дети остаются так же в положении column.

Я думаю, помимо типа отображения, стоит ещё и колонки например задать? Например так: grid-template-columns: 1fr 1fr 1fr; (ну и прочие необходимые параметры, по мере необходимости)

Comments

[Underdoggit]

Тогда в чем его отличие от обычного grid? если задать display: grid и указать колонки, эффект будет аналогичный.

[Евгений Вольф]

Underdoggit, думаю в том, что родительский элемент будет вести себя как строчный, а не как блочный. Точно так же как и inline-table и все прочие inline-элементы.

[Underdoggit]

Евгений Вольф, Спасибо, сори за тупость)

[WapSter]

Underdoggit, как и другой блочно строчный элемент, чтобы блоки вставали рядом друг за другом. Специфичный момент, но бывает необходим. В контентное части например, контент менеджер, же не будет верстать обертку для чего бы то ни было.

[Евгений Вольф]

Underdoggit, не за что, обращайтесь :)