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

• From: Kokomi via GitHub <sysbot+gh@w3.org>
• Date: Sat, 21 Sep 2024 05:41:53 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-2365012825-1726897311-sysbot+gh@w3.org>

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