I'm having trouble setting up a flex structure like this: https://i.sstatic.net/l11bl.png
I can't seem to make it work because the items in a row are taking up space. Is there a way to accomplish this?
.container {
display:flex;
flex-flow:row wrap;
justify-content: center;
max-width: 900px;
}
.container div.section {
margin: 10px 10px;
width: 30%;
height: 300px;
background-color: red;
}
div.section:nth-child(2) {
height: 400px;
}
div.section:nth-child(3) {
height: 280px;
}
div.section:nth-child(4) {
height: 280px;
}
div.section:nth-child(6) {
height: 250px;
}
<div class="container">
<div class="section menu_0"></div>
<div class="section menu_1"></div>
<div class="section menu_2"></div>
<div class="section menu_3"></div>
<div class="section menu_4"></div>
<div class="section menu_5"></div>
<div class="section menu_6"></div>
</div>