Responsive Grids

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.