SDC Pattern Library

Grid: Tight

Grid

Reversible

.grid--reverse

A reversed grid allows you change the source order of the markup and still keep a left-to-right layout.

Align Mid

.grid--align-mid

Uses vertical-align to middle align the columns vertically.

Flexbox

.grid--flex

The grid can make use of CSS3 capabilities of modern browsers to solve layout problems that were previously unsolvable with CSS alone. A good example of this the ability to have equal-height columns via Flexbox.

Gutterless

.grid--gutterless

Removes all gutters from columns.

Tight

.grid--tight

Uses 1/2 sized gutters.

Spaced

.grid--spaced

Adds gutter-sized margins beneath each column. Can be combined with other modifiers that affect margins.

Pixel Gutters

.grid--pixelgutter

Sets the gutters to 1px

<div class="grid grid--tight">
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>
    <div class="grid__col col-1@m">
        <div class="grid__helper">1 col</div>
    </div>

    <div class="grid__col col-2@m">
        <div class="grid__helper">2 col</div>
    </div>
    <div class="grid__col col-2@m">
        <div class="grid__helper">2 col</div>
    </div>
    <div class="grid__col col-2@m">
        <div class="grid__helper">2 col</div>
    </div>
    <div class="grid__col col-2@m">
        <div class="grid__helper">2 col</div>
    </div>
    <div class="grid__col col-2@m">
        <div class="grid__helper">2 col</div>
    </div>
    <div class="grid__col col-2@m">
        <div class="grid__helper">2 col</div>
    </div>

    <div class="grid__col col-3@m">
        <div class="grid__helper">3 col</div>
    </div>
    <div class="grid__col col-3@m">
        <div class="grid__helper">3 col</div>
    </div>
    <div class="grid__col col-3@m">
        <div class="grid__helper">3 col</div>
    </div>
    <div class="grid__col col-3@m">
        <div class="grid__helper">3 col</div>
    </div>

    <div class="grid__col col-4@m">
        <div class="grid__helper">4 col</div>
    </div>
    <div class="grid__col col-4@m">
        <div class="grid__helper">4 col</div>
    </div>
    <div class="grid__col col-4@m">
        <div class="grid__helper">4 col</div>
    </div>

    <div class="grid__col col-6@m">
        <div class="grid__helper">6 col</div>
    </div>
    <div class="grid__col col-6@m">
        <div class="grid__helper">6 col</div>
    </div>
</div>
 
/* No context defined for this component. */