Simple Responsive Grid
A simple responsive grid layout with minimal markup.
0KB - 2013 Copyleft All Rights Reversed
<div>Simple Responsive Grid</div>
<div>Simple Responsive Grid</div>
<span class="grid">
<div class="unit-2">Simple Responsive Grid</div>
<div class="unit-2">Simple Responsive Grid</div>
<div class="unit-3">Simple Responsive Grid</div>
<div class="unit-3">Simple Responsive Grid</div>
<div class="unit-3">Simple Responsive Grid</div>
<div class="unit-4">Simple Responsive Grid</div>
<div class="unit-4">Simple Responsive Grid</div>
<div class="unit-4">Simple Responsive Grid</div>
<div class="unit-4">Simple Responsive Grid</div>
</span><img src="http://placehold.it/400x300">
<span class="grid">
<img class="unit-2" src="http://placehold.it/400x300">
<img class="unit-2" src="http://placehold.it/400x300">
<img class="unit-3" src="http://placehold.it/400x300">
<img class="unit-3" src="http://placehold.it/400x300">
<img class="unit-3" src="http://placehold.it/400x300">
<img class="unit-4" src="http://placehold.it/400x300">
<img class="unit-4" src="http://placehold.it/400x300">
<img class="unit-4" src="http://placehold.it/400x300">
<img class="unit-4" src="http://placehold.it/400x300">
</span>div {
div {font-family: monospace;
font-size: 80%;
color: white;
text-align: center;
line-height: 100%;
}
div,img {width: 100%;
margin-bottom: 10px;
background-color: black; /* optional border color */
padding: 10px; /* optional border width */
box-sizing: border-box;
}
.grid {display: block;
margin-left: -10px;
}
.unit-2,.unit-3,.unit-4 {float: left;
border-left: 10px solid transparent;
box-sizing: border-box;
background-clip: padding-box;
}
.unit-2 {width: 50%;
}
.unit-3 {width: 33.3%;
}
.unit-4 {width: 25%;
}