HTML/CSS grid layout
css, grid, html
Solution
You can not achieve this with Pure CSS. You have to use http://masonry.desandro.com/ for this.
Problem
How could I change this grid layout so that the second row of blocks sit just below the corresponding block above it instead of forming a completely new row? http://jsfiddle.net/AndyMP/wSvrN/ ``` body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #container { position: absolute; width: 60%; left: 50%; margin-left: -30%; border: 1px dotted #333; padding: 20px; } .box1 { position: relative; float: left; width: 100px; height: 150px; background: #666; margin: 0 15px 15px 0; } .box2 { position: relative; float: left; width: 100px; height: 200px; background: #666; margin: 0 15px 15px 0; } .box3 { position: relative; float: left; width: 100px; height: 100px; background: #666; margin: 0 15px 15px 0; } ``` HTML ``` <div id="container"> <div class="box1"></div> <div class="box3"></div> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box2"></div> <div class="box3"></div> <div class="box2"></div> <div class="box1"></div> <div class="box1"></div> <div class="box3"></div> <div class="box2"></div> </div> ```