Spacing equally sized items in a grid?

blade5000

New Member
I'm looking for an ie8-compatible way to create the grid:http://jsbin.com/ihicuz/1/editHTML:\[code\] <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>\[/code\]CSS:\[code\].grid{ background:#DDD; width:830px; height:830px;}.grid>div{ height:200px; width:200px; box-sizing:border-box; border:1px solid #AAA; float:left; margin:0 10px 10px 0; background:#EEE;}.grid>div:nth-child(4n){ margin-right:0;}\[/code\]nth-child works (well, ignoring the overflow of the margin bottom) but doesn't work on ie8.Is there a clean solution to getting equal spacing between these grid items without changing the html markup?
 
Back
Top