SDC Pattern Library

Grid: Reverse

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--reverse">
    <div class="grid__col col-3@m">
        <div class="grid__helper">first col</div>
    </div>
    <div class="grid__col col-9@m">
        <div class="grid__helper">second col</div>
    </div>
</div>
 
/* No context defined for this component. */