Re: [csswg-drafts] Alternate masonry path forward (#9041)

I am currently writing a response to the reply on CASE1 (using display: masonry;) shown above, but I am honestly very confused by the two syntaxes. Do the grid syntax and masonry syntax shown below perform the same functions?

```html
<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="subgrid">
    <div class="subgrid-child"></div>
    <div class="subgrid-child"></div>
  </div>
</div>
```
Grid syntax:

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: masonry;
  gap: 10px;
}

.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: auto / span 3;
  gap: 10px;
}
```

Masonry syntax:

```css
.container {
  display: mansory;
  masonry-template-tracks: 1fr 1fr 1fr 1fr;
  masonry-direction: columns; /* default value */
  gap: 10px;
}

.subgrid {
  display: masonry;
  masonry-template-tracks: subgrid;
  masonry-track: auto / span 3;
  gap: 10px;
}
```

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


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

Received on Saturday, 21 September 2024 05:41:54 UTC