Re: [csswg-drafts] [css-grid-3] Renaming `masonry` keyword (#9733)

As a graphic designer, the thing that makes more sense to me is to keep it into grid. Grids doesn't need to be two dimensional, the columnar grid @jensimmons  mentioned makes the most sense to me.

I was pretty convinced that the sintaxe of disabling the rows with `grid-template-*: off`, or `flex`, or `dense` was the way to go. But then I came across this @maxhoffmann and it makes a LOT of sense.

> When it comes to API design I like to remember the rule "make invalid states unrepresentable". With this rule in mind, applying masonry layout vertically/horizontally via `grid-template-rows: off` or `grid-template-columns: off` creates the possibility of an invalid state:
> 
> ```css
> .invalid-masonry {
>   display: grid;
>   grid-template-rows: off;
>   grid-template-columns: off;
> }
> /* invalid but still possible */
> ```
> 
> Therefore I’d argue for using a different display value like `display: waterfall`, which could then have a `flow-direction` of `inline`, `block` etc. Turning one axis off in grid layout creates an invalid case and also disables the main idea of grid layouts in my view. I’d love to see more ideas that go into the direction of avoiding invalid CSS, so that we cannot shoot ourselves in the foot this easily. Another upside of `flow-direction` is that one might toggle the waterfall direction via a single CSS variable. `flow-direction: var(--direction);`

So I thought why not create a new property?

```css
.columnar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-axes: column; /* new property. Could accept both (default), column and row (or maybe inline and block) */
}
```

The behavior should be similar to `display: flex` with `align-content` without `flex-wrap: wrap`. It should not work and maybe show an info message.

![css-grid-3](https://github.com/w3c/csswg-drafts/assets/30270695/c87e7715-b83f-439b-8de9-8963580c3d3a)

So if `grid-axes: column`, the `grid-template-rows` should be disabled and show a message.
And if `grid-axes: row`, the `grid-template-columns` should be disabled and show a message.

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


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

Received on Thursday, 2 May 2024 15:33:13 UTC