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

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

From: Daniel Tonon via GitHub <sysbot+gh@w3.org>
Date: Thu, 05 Oct 2017 12:23:14 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-334448407-1507206180-sysbot+gh@w3.org>
I think I have a solution that could work. Masonry layout is essentially a series of display: flex; columns with flex-direction set to column that sit next to one another.

The main issue we have right now is that elements in flex as no way of controlling columns when flex-direction is set to column.

There is another css-property that does a similar thing to masonry layout. It's column-count.
https://css-tricks.com/guide-responsive-friendly-css-columns/

Think about this. What if a new flexbox property was introduced that allowed us to control flex-items in a similar sort of way to how column-count works? We can't really use column-count since flex-direction can be set to column which won't make sense.

Just for now let's call the new property `flex-block-count`. I'm going to use the term flex-block to basically mean a single row/column of flex items. So if you had 2 rows of flex items using flex-wrap, each row would be considered a flex-block.

Let's say we apply `flex-block-count: 2` to the flex container. This would basically act the same way as how column-count works on text but it applies to flex items instead of text. It knows that it needs to have at least 2 flex-blocks (unless there aren't enough flex items for that to happen) and it will evenly distribute flex items between flex blocks as best it can. If there are too many flex-items to fit in the flex container, the flex-count setting will be treated as a minimum setting.

This alone wouldn't create masonry layout yet since it would stack things in the wrong order by default:
1 - 4
2 - 5
3 - 6
```css
.flex-container {
  display: flex;
  flex-direction: column;
  flex-block-count: 2;
}
```

Masonry requires this:
1 - 2
3 - 4
5 - 6

So to achieve that we would need another property. Let's call it `flex-block-flow` for now. By default, `flex-block-flow` would be set to `straight`. If we set it to `cross` then it would place things across flex blocks as it's first priority and place things within existing flex blocks as a second priority.

1 - 2
3 - 4
5 - 6

```css
.flex-container {
  display: flex;
  flex-direction: column;
  flex-block-count: 2;
  flex-block-flow: cross;
}
```

You would then use the proposed row-gap and column-gap properties to apply the gaps between flex items.

-- 
GitHub Notification of comment by Dan503
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/945#issuecomment-334448407 using your GitHub account
Received on Thursday, 5 October 2017 12:23:06 UTC

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