Responsive grid with :
- fluid width items
- inner fluid gaps between them
- IE8+ support (at least)
- add a general percent margins to the items with percent widths, make sure
elements widths + left/right magins = 100%;
- compensate the outer margins (between container and items) by setting a negative margin of the same value on the container
- add a general wrapper with
overflow:hidden;
This is simple and doesn't use any properties unsuported by IE8. I am pretty sure it can have a decent output in IE7 if you remove the borders and the box-sizing property.
Just to make sure, negative margins are not a "hack" :
Negative values for margin properties are allowed source : w3.org
HTML :
<div id="wrapper">
<div id="container">
<div class="item"></div>
<div class="item"></div>
...
</div>
</div>
CSS :
#wrapper {
overflow:hidden;
}
#container {
margin: -1.5%;
background:lightgrey;
}
#container:after {
content:'';
display:block;
clear:both; /* clear the floats */
}
.item {
margin:1.5%;
width:30.3333%;
padding-bottom:10%; /* to simulate height on the empty items */
background:grey;
border: 1px solid #000;
float:left;
/* following only if you want to add borders to the items */
box-sizing:border-box;
}
After, you just need to change the width of the .items
with media query to rearange the number of elements in one row on the desired breakpoints.
Example :
@media screen and (max-width: 600px) {
.item {
width:47%;
}
}