Grid

.Grid

This is a simple general purpose grid with a configurable number of base columns and gutter width (see the custom settings).

A Grid can be used on both small and large sections of a page; it is not necessarily a page-wide thing.

Note: all columns in a grid row should add up to the configured amount of columns.

Example

6 wide
2 wide
3 wide
1 wide
1 wide
1 wide
1 wide
1 wide
1 wide
1 wide

Markup

<div class="Grid u-center-text">
    <div class="Grid-column-6" style="border: 1px solid #000;">6 wide</div>
</div>

<div class="Grid u-center-text">
    <div class="Grid-column-2" style="border: 1px solid #000;">2 wide</div>
    <div class="Grid-column-3" style="border: 1px solid #000;">3 wide</div>
    <div class="Grid-column-1" style="border: 1px solid #000;">1 wide</div>
</div>

<div class="Grid Grid--no-gutter u-center-text">
    <div class="Grid-column-1" style="border: 1px solid #000;">1 wide</div>
    <div class="Grid-column-1" style="border: 1px solid #000;">1 wide</div>
    <div class="Grid-column-1" style="border: 1px solid #000;">1 wide</div>
    <div class="Grid-column-1" style="border: 1px solid #000;">1 wide</div>
    <div class="Grid-column-1" style="border: 1px solid #000;">1 wide</div>
    <div class="Grid-column-1" style="border: 1px solid #000;">1 wide</div>
</div>