The generating of the divs is the easy bit - use the clear
property in css and assign it using the nth-child
syntax like so:
<?php
echo "<div class='wrapper'>";
for( $i=0; $i < 6; $i++ ) echo "<div>$i</div>";
echo "</div>";
?>
To see the wrapper background colour it needs a height -the 2n+1
~ this is defined in the css specification so you need only use it like it is. Have a look on css-tricks.com
etc for use of nth-child
, nth-of-type(odd)
etc
<style>
.wrapper{
background:blue!important;
display:block;
width:80%;
min-height:calc( 600px + 7rem );
float:none;
clear:both;
margin:1rem auto;
box-sizing:border-box;
border:2px solid black;
border-radius:1rem;
}
.wrapper div{
width:200px;
height:200px;
border:1px solid black;
float:left;
margin:1rem;
display:block;
background:whitesmoke;
}
.wrapper div:nth-child(2n+1){
clear:left;
}
</style>