search

gilbitron / flexmasonry

A lightweight masonry (cascading grid layout) library powered by flexbox.
https://flexmasonry.now.sh
MIT License
429 stars 24 forks source link

Tall items can break the flow #5

Closed JoshuaCrewe closed 4 years ago

JoshuaCrewe commented 4 years ago

Here is a pen with an example of what I am talking about.

https://codepen.io/matthewdixon/pen/dyobXEN

Two columns, three (or more items) when the first item is taller than the others. In this example I would expect the last item to be in the right column. But perhaps this is expecting too much from flexbox based layout?

The use case is a page with a series of galleries throughout seperated by text where each gallery has 2 - 6 items in it.

JoshuaCrewe commented 4 years ago

Reading through the code it doesn't look like the intention of this script is to fit the content in the most appropriate space. Is that right? the content flows from top left to bottom right with each block starting where the one above it leaves off. But if there is more space in the next column it won't fill that space instead.

gilbitron commented 4 years ago

That is correct. This doesn't try and fit the content optimally (like Masonry does). This just tries to make the columns similar heights.

JoshuaCrewe commented 4 years ago

Presumably this is beyond the scope of this project ?

gilbitron commented 4 years ago

Yes. Mainly because the aim of this project was to use as little JS as possible.

JoshuaCrewe commented 4 years ago

Sounds good to me!