css and floating divs so they dont break the grid - html

Question

Ive been struggling finding the right solution to this.
say you have 6 divs all different height varying content etc.
in responsive design at a 1080p screen all 6 divs fit on one row... but when the page gets small enough it changes to 3 on each row.
problem is say the second div, is the tallest out of the 1,2,3 divs then 4 5 and 6 divs get shifted out of place
Meaning the 4th div doesnt end up in line with the first div (column wise), how would you make this happen? to ensure the content ends up in the right place no matter what.
<style>
#maincontent { width: 100%; }
.content{ width: 33%; float:left;}
</style>
<div id="maincontent">
<div class="content">a</div>
<div class="content">I have a lot more content so i'm taller</div>
<div class="content">a</div>
<div class="content">I try to float left but can't get inline with the first child</div>
<div class="content">a</div>
<div class="content">a</div>
</div>

Answer 1

You can use the clear property:
This property indicates which sides of an element's box(es) may not be
adjacent to an earlier floating box.
Values other than 'none' potentially introduce clearance. [...] It
is used to push the element vertically past the float.
.content:nth-child(3n + 1) {
clear: left;
}
.content {
width: 33.3%;
float: left;
}
.content:nth-child(3n + 1) {
clear: left;
}
<div id="maincontent">
<div class="content">a</div>
<div class="content">I have a lot more content so i'm taller</div>
<div class="content">a</div>
<div class="content">I try to float left but can't get inline with the first child</div>
<div class="content">a</div>
<div class="content">a</div>
</div>
Alternatively, there is the amazing flexbox:
#maincontent {
display: flex; /* Magic begins */
flex-wrap: wrap; /* Multiline */
}
.content { width: 33.3%; }
#maincontent {
display: flex; /* Magic begins */
flex-wrap: wrap; /* Multiline */
}
.content {
width: 33.3%;
}
<div id="maincontent">
<div class="content">a</div>
<div class="content">I have a lot more content so i'm taller</div>
<div class="content">a</div>
<div class="content">I try to float left but can't get inline with the first child</div>
<div class="content">a</div>
<div class="content">a</div>
</div>