Purely CSS Pinterest Layout?

etc · 2013-10-07 12:31:01

Hi folks,

following this discussion, I have tried to find a noscript way to perfectly align horizontally sorted unequal height boxes, like these:

A|B|C
D|B|F
 |E|F

I have partially (using plugin) succeeded, but still wonder if there is a modern (flexbox?) purely CSS way to solve it?

maniqui · 2013-10-07 14:02:21

I think you are looking for some kind of Holy Grail, but I’d like to be proved wrong. :)

etc · 2013-10-07 14:45:56

maniqui wrote:

I think you are looking for some kind of Holy Grail, but I’d like to be proved wrong. :)

You mean, nobody would share if he knew? :) I’m trying to figure out the logic of CSS Grid Layout, but it’s a bit fuzzy in my head for the moment.

Gocom · 2013-10-07 14:53:51

CSS3 multi-column is the only CSS feature that can render a fluid, non-fixed Masonry layout, e.g. CSS-Only Pinterest Style Columns Layout. Keep in mind this feature is still just a candidate and not standard. Using it is super simple; just give a parent container column properties and you are set. You can then reduce number of columns based on the viewport and media queries.

Last edited by Gocom (2013-10-07 14:57:13)

etc · 2013-10-07 14:58:45

Gocom wrote:

CSS3 multi-column is the only CSS feature that can render a fluid, non-fixed Masonry layout…

Wouldn’t this break the sort direction? i.e. we’ll get

A|C|F
B|D|F
B|E|

Gocom · 2013-10-07 15:13:25

etc wrote:

Wouldn’t this break the sort direction? i.e. we’ll get

Yep.

etc · 2013-10-07 19:43:33

Gocom wrote:

Using it is super simple; just give a parent container column properties and you are set. You can then reduce number of columns based on the viewport and media queries.

I totally agree, and actually use it on non-individual pages of my site. It’s even simpler than that, because the number of columns will adapt itself to the viewport if you set only column-width value. But it does not (yet?) play well with other CSS layouts, for example inside a table-cell or a flex.

gaekwad · 2013-10-08 10:45:16

FWIW, I ended up using Bootstrap 3 and article offsets to achieve what I wanted: it was hacky, but looked OK. I’m very aware this is likely no help at all, but I wanted to share for completeness.

etc · 2013-10-08 12:53:49

gaekwad wrote:

FWIW, I ended up using Bootstrap 3 and article offsets to achieve what I wanted: it was hacky, but looked OK. I’m very aware this is likely no help at all, but I wanted to share for completeness.

Thanks for sharing, Pete. It’s great for the responsiveness (lacking in my solution), but does not meet your initial requirements (gaps…).

gaekwad · 2013-10-23 14:05:24

etc wrote:

It’s great for the responsiveness (lacking in my solution), but does not meet your initial requirements (gaps…).

Actually, there are no gaps. My solution involved 3 columns each 1 article/cell wide, and vertically stacked divs within each column, so the articles displayed like this (newest article first):

 +-+-+-+
 |9|8|7|
 |-|-|-|
 |6|5|4|
 |-|-|-|
 |3|2|1|
 +-+-+-+

Unfortunately, when the responsive magic kicked in the CSS stacked the columns and it looked wrong:

 +-+
 |9|
 |-|
 |6|
 |-|
 |3|
 |-|
 |8|
 |-|
 |5|
 |-|
 |2|
 |-|
 |7|
 |-|
 |4|
 |-|
 |1|
 +-+

At which point, something else more urgent came up and I had to leave it, sadly.

Textpattern CMS

Textpattern CMS support forum

#1 2013-10-07 12:31:01

Purely CSS Pinterest Layout?

#2 2013-10-07 14:02:21

Re: Purely CSS Pinterest Layout?

#3 2013-10-07 14:45:56

Re: Purely CSS Pinterest Layout?

#4 2013-10-07 14:53:51

Re: Purely CSS Pinterest Layout?

#5 2013-10-07 14:58:45

Re: Purely CSS Pinterest Layout?

#6 2013-10-07 15:13:25

Re: Purely CSS Pinterest Layout?

#7 2013-10-07 19:43:33

Re: Purely CSS Pinterest Layout?

#8 2013-10-08 10:45:16

Re: Purely CSS Pinterest Layout?

#9 2013-10-08 12:53:49

Re: Purely CSS Pinterest Layout?

#10 2013-10-23 14:05:24

Re: Purely CSS Pinterest Layout?

Board footer