Horizontal masonry layout with flexbox CSS only [duplicate]

Question

I'm trying to create a horizontal masonry layout using only CSS and flexbox. The problem I'm having is there are vertical gaps between the elements, without using align-left: stretch; is it possible to close the gaps?

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  align-items: flex-start;
}


.card {
  width: 25%;
  flex: 1 0 auto;
}

full codepen here

Lunalunacy

Vertical gaps between which elements? – Potbellied

Between card 2 and 5. I'm trying to get them to align like this: codepen masonry – Lunalunacy

Just a suggestion to improve your question and readability: include the relevant parts of your code. – Lute

Answer 1

Here is one option using wrapped columns, but it requires a fixed height.

.card-container {
  display: flex;
  flex-flow: column wrap;
  height:100vh;
  align-items: center;
  background-color: #888;
}

A better option for CSS masonry layout is to use columns, an example is on this blog post http://w3bits.com/css-masonry/

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

Mastaba

I like your solutions! I was assuming the blocks had to flow from left to right. In your case they flow from top to bottom. – Siple

Columns is not a better solution as columns make the newest items go down the left column as opposed to the newest items being listed left right and then going down – Kiely

This is the solution to the problem ( CSS, no vertical spacing, masonry layout) https://mcmap.net/q/456535/-how-do-you-float-elements-without-a-vertical-gap – Ravelment

Answer 2

Flex box wrap wraps the overflowing elements to a new row. This new row has, just like the previous row, the height of the highest flex child in it. It will not let the elements in the row go outside that rows boundaries.

So unfortunately, no you cannot close the vertical gaps with flexbox.

Siple