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>
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:

.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.4.0 : Tuesday, 5 July 2022 06:41:31 UTC