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

[benface]

I am watching @stubbornella's talk from CSS Day 2024 right now, and the first thing I thought when I saw this layout...

...was that I would really like to accomplish this with regular Grid layout (even though she was proposing a way to solve it with Masonry), by placing elements 2 & 4 in the same cell (but somehow rendering one after the other instead of overlapping) and 3 & 5 together in another cell.

Very simplistic proposal to make that possible: a new ::grid-area(<named-grid-area>) selector that, when used, creates a wrapper box around all the elements that get placed in the specified grid area, allowing to bypass the default "overlap" behavior/rendering of multiple elements in said area. That way, we could achieve the above with:

.grid {
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
}

.grid::grid-area(main), .grid::grid-area(sidebar) {
  display: block; /* or flex with flex-direction: column */
}

.banner, .content {
  grid-area: main;
}

.secondary-nav, .ads {
  grid-area: sidebar;
}

I'm sure this is much easier said than done, especially because I can't think of anything like that in CSS right now. But if there's a chance it could be technically possible, I feel like it would solve the problem elegantly.

[tabatkins]

Whoops, my #9098 is technically a dupe of this issue.

My proposed solution is very close to what you are saying, @benface, just with a tiny bit more indirection for flexibility.

[FireRedDev]

I would also need this, it makes responsive design vastly more flexible if i can merge grid areas into grid regions for media queries or template area