umaranis/css-masonry-layout

Create Masonry Layout with CSS (Grid with variable-sized contents arranged in columns)

Source code for examples in my article here.

Grid

• 👎 doesn't handle variable size

Flex

• 👍 handles variable size
• 👎 need to set the height of container to wrap items into the second column
• 👎 doesn't put the second item in second column, rather puts it as the second item in first column

Flex (Firefox)

• 👎 perfect but only in firefox

column-count

• 👍 handles variable size
• 👍 no need to set the height of container to wrap items into the second column
• 👎 doesn't put the second item in second column, rather puts it as the second item in first column