Equal height columns - CSS

Question

I have an outer div-element which contains many inner div-elements. I would like to achieve that the inner-divs have the same height on every window-size.

If i use display: flex; on the outer-div, the problem is that all inner-divs come on one line. There should be five divs in a row and when the window is getting smaller, they should flow down.

Here is a JSFiddle: https://jsfiddle.net/k7oLbqj1/5/

I can solve this issue with only CSS. I hope somebody can help me.

Thanks in advance!

flex + flex-wrap will do break it into lines. display:grid will help to keep col and rows sams size and eventually allow spanning col or rows or both. can you share your code here too . — G-Cyrillus, May 12 '17 at 11:39
a grid example from my earlier comment : https://jsfiddle.net/k7oLbqj1/7/ — G-Cyrillus, May 12 '17 at 11:45

score 3 · Accepted Answer · answered May 12 '17 at 10:22

Use flex-wrap: wrap; with display: flex; on .outer and give width on .inner

.outer {
    display: flex;
    flex-wrap: wrap;
}

.inner {
    background: #fff;
    border: 1px solid #000;
    padding: 10px;
    margin-bottom: 20px;
    width:20%;
    text-align: left;
    box-sizing: border-box;
}

https://jsfiddle.net/k7oLbqj1/6/

Equal height columns - CSS

1 Answers1