Re: [csswg-drafts] [css-grid-2] Masonry layout (#4650)

• From: Rami Yushuvaev via GitHub <sysbot+gh@w3.org>
• Date: Thu, 23 Jan 2020 14:58:47 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-577718020-1579791525-sysbot+gh@w3.org>

Masonry layout can be implemented not only using the grid system (`display: grid`), but also using multiple-column layout (`columns: 4`) we just need to add support for the order/direction type (mentioned by @jensimmons).

## Columns

The mechanism is there:

* `columns`
* `column-count`
* `column-fill`
* `column-rule`
* `column-span`
* `column-width`

We just need to add a new property `column-order` or `column-direction`.

## Column Direction

### Inline

Inline behavior `column-direction: inline` (the default value), will position the next item in the same column:

![masonry 002](https://user-images.githubusercontent.com/108474/72972385-a7bc1c80-3dcb-11ea-92e5-0bac48dc6813.jpeg)

### Block

Block behavior `column-direction: block`, will position the next item in the next column:

![masonry 005](https://user-images.githubusercontent.com/108474/72972597-084b5980-3dcc-11ea-9cde-e8d70601bd83.jpeg)

### Masonry

Masonry behavior `column-direction: masonry`, will position the next item as close to the top as possible, in any available column.

![masonry 004](https://user-images.githubusercontent.com/108474/72972480-ce7a5300-3dcb-11ea-9e0b-1d0ce123f551.jpeg)


-- 
GitHub Notification of comment by ramiy
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4650#issuecomment-577718020 using your GitHub account

Received on Thursday, 23 January 2020 14:58:48 UTC