Managing CSS flex-box growth in multi-line to create a grid of equal blocks

Question

I am looking for a way to create equally sized boxes with flexbox while using flex-growth: 1. This works pretty good by defining t

Answer 1

This is totally possible, however, you have to know how many columns you'll have at a maximum. http://jsfiddle.net/kelunik/C2q8D/6/

Solution

By adding a few empty placeholders, your cards get equally sized. You just have to make sure, you're adding enough placeholders. It doesn't matter if there are too many, because they'll have a height of zero and are not visible.

CSS

section {
    display: flex;
    flex-flow: row wrap;
    background-color: blue;
}

div {
    background-color: red;
    height: 3rem;
    flex: 1 0 10rem;
}

div:nth-child(even) {
    background-color: green;
}

div:empty {
    margin: 0;
    height: 0;
    border: 0;
    background: transparent;
}

HTML

    
a
    
b
    
c
    
d
    
e
    
f
    
g
    
h
    
i
    
j
    
k