Grid elements should be independent of other markup. This avoids style confict and makes responsive breakpoints easier to manage. It also allows a JavaScript polyfill for browsers that don’t support box-sizing
. See my article On Responsive Layout and Grids.
Below is just an example of layout in action:
1 of 3
2 of 3
3 of 3
1 of 4
2 of 4
3 of 4
4 of 4
1 of 5
2 of 5
3 of 5
4 of 5
5 of 5
<div class="gs">
<div class="gc"><p>Grid unit 1 of 2</p></div>
<div class="gc"><p>Grid unit 2 of 2</p></div>
</div>
Columns are sized with percentage widths. This is content and design specific and not pre-defined with classes.