- From: Oscar Otero via GitHub <sysbot+gh@w3.org>
- Date: Wed, 06 Jun 2018 21:06:15 +0000
- To: public-css-archive@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