Re: [csswg-drafts] [css-grid-3] Designer/developer feedback on masonry layout (#10233)

> @tabatkins can you speak to how you would achieve this use-case? I think you can remove the header and footer from the equation since they can be handled separately. But I'm wondering if your proposal accounts for the optional banner ? Could you still ensure that the right content, secondary nav and ads, end up in the sidebar?

Of course, it would be something like:

```css
@media (wide) {
 body {
  display: masonry;
  /* two tracks, named main/sidebar */
  masonry: "main sidebar" 1fr 200px;
 }

 #main-nav, #footer {
  masonry-track: 1 / -1;
 }
 #banner, #content {
  masonry-area: main;
 }
 #sub-nav, #ads {
  masonry-area: sidebar;
 }
}

@media (narrow) {
 body {
  display: masonry;
  /* just one track, no need for a name */
  masonry: auto;
  /* Or, I guess, just switch to Flexbox or something. Whatever. */
 }
}
/* and since there's only one track, no need to position
   the children manually */
```

Header and footer work just fine, you can still span multiple tracks. And of course `order` can be used if they need to be reordered somewhat between the two modes, just like in Flexbox/Grid.

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


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

Received on Friday, 31 May 2024 20:36:43 UTC