Re: [csswg-drafts] [css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow (#11480)

It's great that we're starting to think about solutions to the TAG recommendation for unified layout properties. I think this is a good proposal. And I agree `item-*` is the best prefix.

Do you see this as part of a family of other `item-*` properties? Is there any other low hanging fruit of layout properties that could be unified?

For example, I wonder if maybe the syntax for `columns` and `grid-template-columns` could be unified as well? `columns: 10rem` does something a bit similar to `grid-template-columns: repeat(auto-fill, 10rem)` .

However, I'm thinking about how there are still lots of essential properties needed for each layout system that are unique to each layout system. For example, to create a flex or grid layout, I'm still most likely going to use `flex` or `grid-template-columns`.

If I mixed them together in the same layout, I'd probably write something like this:

```css
.my-layout {
  display: flex;
  item-flow: row-reverse wrap;

  > * {
    flex: 1;
  }

  @media (width > 20rem) {
    display: grid;
    grid-template-columns: repeat(auto-fill, 8rem);
  }
}
```

In the above example, using `item-flow` has saved me from needing to specify `flex-wrap: wrap`, `flex-direction: row-reverse` and `grid-auto-flow: row-reverse`. But I still won't get the layout I want without `flex` and `grid-template-columns`.



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


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

Received on Tuesday, 14 January 2025 18:21:35 UTC