W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2018

Re: [csswg-drafts] [css-grid][css-flexbox] Pinterest/Masonry style layout support

From: Oscar Otero via GitHub <sysbot+gh@w3.org>
Date: Wed, 06 Jun 2018 21:06:15 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-395213850-1528319174-sysbot+gh@w3.org>
Hi.
I think a good approach for masonry-style layouts is something similar to salvattore: https://github.com/rnmp/salvattore

I imagine a new property to define how the items are placed in the cells. Currently, if two elements are in the same cell, they are overlapping. This new property, let's call `area-placement` could have the value `flow` to insert the new items next to the currently existing items. For example:

```css
.masonry {
    display: grid;
    grid-template-column: repeat(3, 300px);
    grid-column-gap: 20px;
}
.item:nth-child(3n+1) {
    grid-area: 1 / 1;
    area-placement: flow;
}
.item:nth-child(3n+2) {
    grid-area: 2 / 1;
    area-placement: flow;
}
.item:nth-child(3n) {
    grid-area: 3 / 1;
    area-placement: flow;
}
```

This brings more flexibility, not only to build masonry layouts, but also for more other use cases.

-- 
GitHub Notification of comment by oscarotero
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/945#issuecomment-395213850 using your GitHub account
Received on Wednesday, 6 June 2018 21:06:18 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 6 June 2018 21:06:20 UTC