W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2017

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

From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
Date: Mon, 23 Jan 2017 21:24:46 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-274621588-1485206684-sysbot+gh@w3.org>
You can have Grid do Masonry *if* you know the heights of the items 
ahead of time. It's a bit hacky, but you set the grid container to 
`grid: auto-flow dense 1px / <column widths here>;`, then set each 
item to `grid-row: span <pixel height as integer>;` (for example, if 
the item is 50px tall, use `grid-row: span 50;`).

The dense placement will put each item into whichever column is the 
least filled (has the highest open row).

There's not currently any way to make this work with auto heights.  We
 might do this in the future.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/945#issuecomment-274621588 
using your GitHub account
Received on Monday, 23 January 2017 21:24:52 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:07 UTC