Grid: Breakpoints

The grid contains a number of classes for controlling the width of grid columns at different breakpoints. This offers a lot of control over how the grid should behave on different devices and browser sizes.

A grid column's width will be inherited by all breakpoints greater than or equal to the specified breakpoint. For example, if a column's width is set to be 75% wide at the medium breakpoint, it will remain 75% wide for all larger breakpoints, too, unless it's overridden.

Example #1

Medium - 8 columns
Large - 9 columns
Medium - 4 columns
Large - 3 columns 
<div class="grid">
    <div class="grid-col grid-col--md-8 grid-col--lg-9">
        [...]
    </div>
    <div class="grid-col grid-col--md-4 grid-col--lg-3">
        [...]
    </div>
</div>

Example #2

Small - 3 columns
Medium - 2 columns
Large - 4 columns
Extra Extra Large - 2 columns
Small - 3 columns
Medium - 2 columns
Large - 4 columns
Extra Extra Large - 5 columns
Small - 3 columns
Medium - 4 columns
Large - 2 columns
Extra Extra Large - 2 columns
Small - 3 columns
Medium - 4 columns
Large - 2 columns
Extra Extra Large - 3 columns 
<div class="grid">
    <div class="grid-col grid-col--sm-3 grid-col--md-2 grid-col--lg-4 grid-col--xxl-2">
        [...]
    </div>
    <div class="grid-col grid-col--sm-3 grid-col--md-2 grid-col--lg-4 grid-col--xxl-5">
        [...]
    </div>
    <div class="grid-col grid-col--sm-3 grid-col--md-4 grid-col--lg-2 grid-col--xxl-2">
        [...]
    </div>
    <div class="grid-col grid-col--sm-3 grid-col--md-4 grid-col--lg-2 grid-col--xxl-3">
        [...]
    </div>
</div>

Example #3

Small - 6
Large - 2
Small - 6
Extra Large - 4
Small - 6
Large - 2
Extra Large - 4
Small - 6
Large - 2 
<div class="grid">
    <div class="grid-col grid-col--sm-6 grid-col--lg-2">
        [...]
    </div>
    <div class="grid-col grid-col--sm-6 grid-col--xl-4">
        [...]
    </div>
    <div class="grid-col grid-col--sm-6 grid-col--lg-2 grid-col--xl-4">
        [...]
    </div>
    <div class="grid-col grid-col--sm-6 grid-col--lg-2">
        [...]
    </div>
</div>

Example #4

Medium - 3
Medium - 3
Medium - 3
Medium - 3
Medium - 3
Medium - 3
Medium - 3
Medium - 3 
<div class="grid">
    <div class="grid-col grid-col--md-3">
        [...]
    </div>
    <div class="grid-col grid-col--md-3">
        [...]
    </div>
    <div class="grid-col grid-col--md-3">
        [...]
    </div>
    <div class="grid-col grid-col--md-3">
        [...]
    </div>
    <div class="grid-col grid-col--md-3">
        [...]
    </div>
    <div class="grid-col grid-col--md-3">
        [...]
    </div>
    <div class="grid-col grid-col--md-3">
        [...]
    </div>
    <div class="grid-col grid-col--md-3">
        [...]
    </div>
</div>