[Grid] Allow items to be containers as well [enhancement]

[damianobarbati]

What about allowing a Grid item to act as a container as well?
In a common scenario where a Grid[type=item] must contain 3 nested items we have to :

Grid[type=item]
   Grid[type=container]
       Grid[type=item]
       Grid[type=item]
       Grid[type=item]

when we could just:

Grid[type=item][type=container]
    Grid[type=item]
    Grid[type=item]
    Grid[type=item]

A display:flex div can have flex property as well and viceversa: we would achieve less DOM and the same effect.

[oliviertassinari]

That's an advanced use case, it's not documented as it might be counter intuitive for some users.
Still, we have a regression test case, you can find the visual output on Argos-CI.

[emmanuelbuah]

@oliviertassinari I feel allowing a div to act as a container and an item at the same time is more logical that excess nested grids to accomplish the same objective. I could be missing something here, potentially in relation to breakpoints but I think it will save users a lot of time and reduce the number of elements rendered on a page. I'd like like to understand the advanced nature of this change. I'd be happy to help if needed.

[oliviertassinari]

@emmanuelbuah Alright, I'm reopening this issue so we document this behavior. We would love some help. I believe it's about finding a compelling use case where the item + container on the same DOM element makes sense :).

[avdd]

@oliviertassinari I disagree that this is an advanced use case. I'm fairly new to grids and flex and as soon as I wanted to nest layouts (which was immediately) I considered this. So your compelling use case is: any time you want to nest a flex layout :-)

[oliviertassinari]

@cdietze has built a nice demo: https://codesandbox.io/s/8xw3205y10. It's a good starting point for documentation this feature :).