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: François REMY via GitHub <sysbot+gh@w3.org>
Date: Fri, 08 Jun 2018 20:18:48 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-395878536-1528489127-sysbot+gh@w3.org>
I don't see why you force a specific column in your example, you can achieve the exact same example like this:

.masonry {
    display: grid;
    grid-template-column: repeat(3, 300px);
    grid-column-gap: 20px;
    grid-auto-rows: auto;
.item:nth-child(3n+1) {
    grid-column: 1;
.item:nth-child(3n+2) {
    grid-column: 2;
.item:nth-child(3n) {
    grid-column: 3;

(and when you have subgrid, you will be able to wrap this niceline in one row of the parent grid if you want, yet reusing the grid lines for your columns)

GitHub Notification of comment by FremyCompany
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/945#issuecomment-395878536 using your GitHub account
Received on Friday, 8 June 2018 20:18:50 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:50 UTC