Re: [csswg-drafts] [css-grid-N] Flowing grid items together (#9098)

Would it be possible to auto-generate `::grid-flow()` pseudos when doing auto layout?

Say that you want to layout an article with grid, and place most items in a centered text-column. Wrapping these elements with a `::grid-flow()` pseudo would be awesome, and would unlock using a separate layout for the text elements, such as regular flow. 

Every now and then you might want an element to pop out of the column and use different grid tracks. 

After the popout element you really want to start a new  `::grid-flow()` wrapper, as you don't want to reorder the elements of the article. 

Would it be possible automatically generate separate `::grid-flow()` wrappers for each group of adjacent siblings?


```html
<article>
  <!-- start of ::grid-flow(--text 1) -->
  <h1>Title</h1>
  <p>Text...</p>
  <p>Some more text...</p>
  <!-- end of ::grid-flow(--text 1) -->
  <img class=popout />
  <!-- start of ::grid-flow(--text 2) -->
  <h2>Subtitle</h2>
  <p>Some more text..</p>
  <!-- end of ::grid-flow(--text 2) -->
</article>
```

```css
article {
  display: grid;
  grid-template-columns:
    [popout-start] minmax(20px, 1fr)
    [text-start] minmax(auto, 600px)
    [text-end] minmax(20px, 1fr)
    [popout-end];
}

article > :is(h1, h2, p, img) {
  grid-flow: --text;
}

article::grid-flow(--text /* auto/adjacent? */) {
  grid-column: text-start / text-end;
}

article > .popout {
  grid-column: popout-start / popout-end;
  grid-flow: none;
}
```

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


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

Received on Thursday, 26 September 2024 16:03:45 UTC