[css-grid] Flow multiple elements together into same grid area

[klimashkin]

Using CSS Grid is very convenient to do responsive table with vertically stacked columns like https://hashnode.com/post/really-responsive-tables-using-css3-flexbox-cijzbxd8n00pwvm53sl4l42cx#advanced-example

You can see example using Grid here: http://codepen.io/klimashkin/pen/peXPXY
But when content of some cells on not last row is wrapped into several lines, other cells in the same row become the same height. And we have vertical gaps between cells on different rows (LabelX columns):

It's understandable because of

I couldn't find workaround for that using grid properties (align-self, min-content, etc), and I don't know if it's even possible with CSS GRID to move cells upper. Is it?

[fantasai]

I'm not 100% sure of what you want to do, but you would probably find it useful to play with the span keyword and possibly also display: contents.

[klimashkin]

@fantasai Sorry, if I was not clear enough.

I want to get rid of the gap between Production and Web cells, and move Web higher

I don't know in advance if content of some cell will be wrapped, it's dynamic

[tabatkins]

From what I can tell, you want to be able to flow multiple elements into the same cell; right now, they're going in separate cells, and each "row" of the narrow-screen layout is actually several grid rows. Your "gap" is the result of the "Desc" and "Label 3" data both going in the same grid row, and since the "Desc" sometimes has much more content, it stretches the grid row, making the "Label 3" cell tall as well.

This isn't possible in current Grid. Sometimes, a combination of wrapper divs and display: contents will work (put things into a wrapper div that want to be "together" in the narrow view, use display: contents on the wrapper so you can individually position the things in your wider view), but that's clumsy and won't always work.

Ultimately you want CSS Regions, or a Regions-lite functionality. This was discussed for Grid, and earlier versions of the spec had it, but it was eventually removed for complexity reasons. Hopefully it'll show up in Grid 2.

[klimashkin]

Thanks for answer, @tabatkins!
Hope Grid level 2 will have such thing along with subgrid - and then it will be possible to implement fully responsive table with stacking columns using css only.

[tabatkins]

Reopening and tagging for Grid 2, just to help keep track of the feature request.

[ByteEater-pl]

Unfortunately, it's rather complicated to do - it ends up being a subset of the Regions functionality, which the WG ended up abandoning due to implementor objection.
(@tabatkins, from #546)

Is that objection still relevant though?

1. Since then Opera, the implementor represented by the objector, abandoned its engine Presto and switched to Blink.
2. The objection text stated that the ability to flow content of elements into other arbitrary elements would likely be abused to create markup and presentations which don't follow the principle of separation of concerns. Defendants of regions countered that although indeed at that time the targets available for redirecting flows were mostly elements, multiple other possibilities were being designed (and even more envisioned), and those would be in the realm of styling (e.g. the very grid areas discussed here), not tightly coupled to markup. They were right, after a few years of CSS evolution we have many of those now, and new kinds steadily accumulate.

[tabatkins]

Pinging this issue because the major blocker (Blink not being capable of doing this in its previous layout engine) shouldn't be an issue any longer - now that Blink's Grid impl is on LayoutNG (as of Chrome/Edge 93), it should be possible to do.

@bfgeek, want to confirm that this should be possible now?

[bfgeek]

Almost possible - but not quite yet for us - still working on our fragmentation engine.