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

+1 @fantasai suggestion of [`pack`](https://github.com/w3c/csswg-drafts/issues/9733#issue-2051154069)

### Why `pack`?

How the browser handles placement is the unique behavior gained from this type of layout.

Reading over the [CSS Grid Layout Module Level 2](https://www.w3.org/TR/css-grid-2/) and [Editor’s Draft of CSS Grid Layout Module Level 3](https://drafts.csswg.org/css-grid-3/) the word “pack” is used to describe placement — especially dense packing. 

#### Benefits

- Short / concise
- Not used in existing CSS properties or values
- [Not a metaphor](https://github.com/w3c/csswg-drafts/issues/9733#issuecomment-2067713345)
- No `en-US` versus `en-UK` alternate spellings

#### Questions

- Does `pack` translate clearly to non-English speaking languages and cultures?

---

### Using `pack`

The Webkit blog is persuasive and the use cases @jensimmons shared are wonderful. This is definitely a _type of grid_ but that doesn’t mean it must be part of CSS Grid or within `display: grid`. 

Over the last two weeks I’ve been reading all the related CSS WG issue threads about the syntax and implementation. In particular @tabatkins comments on [issue #9041](https://github.com/w3c/csswg-drafts/issues/9041) stand out:

- [allows you to write things that don't make sense in a Masonry context](https://github.com/w3c/csswg-drafts/issues/9041#issuecomment-2075240700)
- [Friction Points with Masonry-in-Grid](https://github.com/w3c/csswg-drafts/issues/9041#issuecomment-2075501616)

There are so many properties and values within CSS Grid. Some make sense for pack/masonry/waterfall, but some very much do not. Especially once you start writing complex values or use shorthand declarations. And consider situations where `@media`, or `@container` are used with the cascade to change a declaration in certain contexts.

Once I started experimenting with full rulesets, I found it much easier to author and reason about `display: pack` than when the placement behavior was mixed into `display: grid` with `grid-*` property values.

```css
.container {
 display: pack;
 pack-template-tracks: ;
 pack-template-areas: ;
 pack-direction: ;
 pack-threshold: ;
 pack-auto-flow: ;
}
.item {
 pack-track: ;
 pack-track-start: ;
 pack-track-end: ;
}
@media {
 .container {
  pack-template-tracks: ;
 }
}
```

In that media query, `pack-*` helps disambiguate. And when different sections of a stylesheet or different `@layers` are using the cascade to change a declaration, reading `pack-*` offers context about the layout types unique constraints that reading `grid-*` does not.


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


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

Received on Friday, 3 May 2024 17:58:04 UTC