Re: [csswg-drafts] [css-grid] Flow multiple elements together into same grid area (#1183)

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

![CleanShot 2024-06-11 at 20 05 22@2x](https://github.com/w3c/csswg-drafts/assets/1059139/2a70b7d8-ff36-4934-846e-020a16dbef81)

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

```css
.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.

-- 
GitHub Notification of comment by benface
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1183#issuecomment-2161844991 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 12 June 2024 00:32:21 UTC