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

**Should “masonry”/“waterfall” be part of CSS Grid or a separate display type??**

Including "masonry" or "waterfall" layouts within CSS Grid makes sense. It's a natural fit for the Grid model and reduces unnecessary complexity.

**Do you want the capabilities to define a single-axis grid with CSS Grid — to use subgrid, spanning, explicit placement, and combining different track sizes? Or do you only want the ability to define a classic masonry layout with equal-sized columns?**

There's no need to sacrifice features when we can have both. Providing the flexibility of CSS Grid for various layouts, including classic masonry, ensures versatility without limitations.

**Will you use this at all? What might you do with it?**

Yes, for sure. I'm aways a fan of sprinkling some asymmetry here and there.

---

## The problem of invalid API

As [highlighted by](https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2072194396) by @saivan and elaborated on by [Max Hoffmann](https://github.com/maxhoffmann) in [this comment](https://github.com/w3c/csswg-drafts/issues/9733#issuecomment-2087240705), a significant concern arises from the potential for users to inadvertently create invalid layouts.

```css
.invalid-masonry {
  display: grid;
  grid-template-rows: off /* or masonry, or whatever*/;
  grid-template-columns: off;
}
/* invalid but still possible */
```

To mitigate this, introducing a **new property** such as `grid-axes` seems prudent. This property could offer options like `both (default)`, `column`, or `row`, providing clearer guidance for developers.

```css
.columnar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-axes: column; /* proposed new property */
}
```

Handling cases where a user declares `grid-template-*` and subsequently disables it with `grid-axes` should mirror behavior seen with `display: flex` and `align-content` without `flex-wrap: wrap`. In such instances, functionality should be disabled, potentially accompanied by an informative message.

![css-grid-3](https://github.com/w3c/csswg-drafts/assets/30270695/bfee9307-163a-4bb0-a95d-c120b418db5d)

Thus, if `grid-axes` is set to `column`, `grid-template-rows` would be disabled. Similarly, when `grid-axes` is set to `row`, `grid-template-columns` would be disabled. This approach promotes clarity and resilience through the cascade, aiding developers in making informed decisions while avoiding unintended consequences.

-- 
GitHub Notification of comment by gilsonnunesfilho
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2091386721 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 19:28:57 UTC