In some cases, works display: inline-grid?

Hello!

Looked for articles, lots of information by gridam, but just a couple of lines about inline-grid.

  1. When and how does it work?
  2. Has children, has a parent, it does not work by analogy with the Flex?


Write the parent display: inline-grid and children are also in the position column.

Code on codepen

UPD: Moreover, in a real project in the mobile version it works, fulfills the grid-gap and the elements are arranged in a line, but only with Mozilla, with the prefix -moz.
March 23rd 20 at 19:22
1 answer
March 23rd 20 at 19:24
Solution
Write the parent display: inline-grid ' and children remain the same in the position column.
I think, besides the display there is a column such as ask? For example: grid-template-columns: 1fr 1fr 1fr; (and of other necessary parameters, as needed)
Then how is it different from the normal grid? if you set display: grid and specify the columns, the effect will be similar. - albertha commented on March 23rd 20 at 19:27
@Alejandro, I think that the parent will behave as a string and not as blocky. In the same way as inline-table and all other inline-elements. - juliet.Thiel commented on March 23rd 20 at 19:30
@juliet.Thiel, Thanks, sory for the stupidity) - albertha commented on March 23rd 20 at 19:33
@Alejandro, like other packaged line item to units stood next to each other. Specific moment, but sometimes necessary. In the content part such as content Manager, not to impose a wrapper for anything. - verner.Jacobs19 commented on March 23rd 20 at 19:36
@Alejandro, not for that, please :) - juliet.Thiel commented on March 23rd 20 at 19:39

Find more questions by tags CSS