Re: [csswg-drafts] [css-grid-3][masonry] item-flow row vs. column in masonry layouts (#12803)

Unless I'm mistaken, it seems that option B (1 and 2) introduces new values to `grid-auto-flow` which won't always have an effect depending on the layout type (grid vs. grid-lanes).

If I am mistaken and option B does include that `normal`, `row`, `row-reverse`, `column`, `column-reverse`, `wrap`, `wrap-reverse`, and `dense` all apply to both grid and grid-lanes layouts, then that's a bit better, but that's also making an already complex layout system even more complex.

The [State of CSS 2025 responses](https://2025.stateofcss.com/en-US/features/#layout_pain_points) (especially those to the layout pain points section) show that a large majority of the respondants mentioned difficulties with the Grid and Flexbox syntaxes.

While a lot of these have to do with the `justify` and `align` keywords, my interpretation is that pain is also experienced when using some of the complicated shorthand syntaxes and other properties such as `grid-auto-flow` or `flex-flow`.

I think option A will be easier for authors to understand.

<details>
  <summary>How to get raw freeform comments</summary>

  Unfortunately, the little speech bubble icon in the survey results page is currently broken. But you can still get the comments by using the State of CSS GraphQL API this way:

  1. Go to https://graphiql.devographics.com/

  2. For Grid, enter the following query:

     ```graphql
      query {
        surveys {
          state_of_css {
            css2025 {
              layout {
                layout_pain_points {
                  freeform {
                    rawData(token: "grid") {
                      answers {raw}
                    }
                  }
                }
              }
            }
          }
        }
      }
     ```

  3. For Flex, enter the following query:

     ```graphql
      {
        surveys {
          state_of_css {
            css2025 {
              layout {
                layout_pain_points {
                  freeform {
                    rawData(token: "flexbox_issues") {
                      answers {raw}
                    }
                  }
                }
              }
            }
          }
        }
      }
     ```

  4. Click the Execute query button.
</details>

Finally, maybe it's just me, but my mental model around row and column is broken with option B1:

* Waterfall with option A is: `grid-lanes-direction: column;`

  I'm defining my _lanes_, and I want them as columns. Makes perfect sense.

* Waterfall with option B1 is: `grid-auto-flow: row;`

  Now I need to think in terms of _items_ instead of _lanes_, and this makes less sense to me because there's no guarantee items are actually visually aligned across the lanes. For what it's worth, I might have a giant sidebar-style item in the first column, and a series of shorter items in the other columns. Visually, I see no rows, only columns.

While option B2 addresses this last point, I can't easily wrap my head around what the word `flow` really means in this context. And I envision myself having to just learn to use the property by heart. Kind of like what many authors do when centering with `display:flex;justify-content:center;align-items:center;`. They don't really understand what `justify`, `align`, `content`, `items` do, and why these properties are named as such. They just learned this formula.

I feel like the proposed `grid-auto-flow` syntax in B1 and B2 suffers from the same problem and further adds to the cognitive load that authors already experience.

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


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

Received on Wednesday, 17 December 2025 08:06:04 UTC