[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.