Moody's CRE

Grid

Basic Grid

We use flexbox for our grid. All rows must be wrapped in .grid-row. All units must have .grid-column. You can specify widths with .span- and then either a number (we have 24 total columns) or fractional classes like .span-one-third. Include .grid-row--flex-cells on a row to make all the grid units inside the same height. All units become 100% width on mobile.

Outside the grid
span-12
span-12
span-one-third
span-one-third
span-one-third
This column's siblings are the same height, despite having different content.
span-one-fourth
span-6
span-one-fourth
<div class="p1 rounded mb2 bg--gray-200">Outside the grid</div>

<!-- Basic grid examples -->
<div class="grid-row">
    <div class="grid-column mb2 span-12"><div class="p1 rounded bg--gray-200">span-12</div></div>
    <div class="grid-column mb2 span-12"><div class="p1 rounded bg--gray-200">span-12</div></div>
</div>
<div class="grid-row">
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">span-one-third</div></div>
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">span-one-third</div></div>
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">span-one-third</div></div>
</div>

<!-- Same height siblings -->
<div class="grid-row grid-row--flex-cells">
    <div class="grid-column span-6"><div class="p1 rounded bg--gray-200">This column's siblings are the same height, despite having different content.</div></div>
    <div class="grid-column span-one-fourth"><div class="p1 rounded bg--gray-200">span-one-fourth</div></div>
    <div class="grid-column span-6"><div class="p1 rounded bg--gray-200">span-6</div></div>
    <div class="grid-column span-one-fourth"><div class="p1 rounded bg--gray-200">span-one-fourth</div></div>
</div>

Vertical Alignment

Control the vertical alignment of all units in a row with .grid-row--top, .grid-row--center, or .grid-row--bottom. Control the vertical alignment of individual units with .column--top, .column--center, or .column--bottom. All units are vertically top-aligned by default.

This cell should be top-aligned.
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.
This cell should be top-aligned.
This cell should be center-aligned.
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.
This cell should be center-aligned.
This cell should be bottom-aligned.
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.
This cell should be bottom-aligned.
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.
Top
Center
Bottom
<!-- Top-aligned -->
<div class="grid-row grid-row--top">
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">This cell should be top-aligned.</div></div>
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.</div></div>
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">This cell should be top-aligned.</div></div>
</div>

<!-- Centered -->
<div class="grid-row grid-row--center">
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">This cell should be center-aligned.</div></div>
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.</div></div>
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">This cell should be center-aligned.</div></div>
</div>

<!-- Bottom-aligned -->
<div class="grid-row grid-row--bottom">
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">This cell should be bottom-aligned.</div></div>
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.</div></div>
    <div class="grid-column mb2 span-one-third"><div class="p1 rounded bg--gray-200">This cell should be bottom-aligned.</div></div>
</div>

<!-- Mixed vertical alignment -->
<div class="grid-row">
    <div class="grid-column span-6"><div class="p1 rounded bg--gray-200">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.</div></div>
    <div class="grid-column column--top span-one-fourth"><div class="p1 rounded bg--gray-200">Top</div></div>
    <div class="grid-column column--center span-6"><div class="p1 rounded bg--gray-200">Center</div></div>
    <div class="grid-column column--bottom span-one-fourth"><div class="p1 rounded bg--gray-200">Bottom</div></div>
</div>

Automatic Sizing

If no span is specificed (indicated by "auto" examples below), the column will fill the rest of the available space.

span-12
auto
span-one-third
auto
span-one-third
<div class="grid-row">
    <div class="grid-column mb2 span-12"><div class="p1 rounded bg--gray-200">span-12</div></div>
    <div class="grid-column mb2"><div class="p1 rounded bg--gray-200">auto</div></div>
</div>

<div class="grid-row">
    <div class="grid-column span-one-third"><div class="p1 rounded bg--gray-200">span-one-third</div></div>
    <div class="grid-column"><div class="p1 rounded bg--gray-200">auto</div></div>
    <div class="grid-column span-one-third"><div class="p1 rounded bg--gray-200">span-one-third</div></div>
</div>

Nesting

You can nest an infinite amout of grid rows within individual units.

2/3
1/2
1/2
1/3
<div class="grid-row">
    <div class="grid-column">
        <div class="p1 rounded bg--gray-200">
            <div class="grid-row">
                <div class="grid-column span-8">
                    <div class="p1 rounded bg--gray-200">1/3</div>
                </div>
                <div class="grid-column">
                    <div class="p1 rounded bg--gray-200">
                        <div class="grid-row">
                            <div class="grid-column span-12">
                                <div class="p1 rounded bg--gray-200">1/2</div>
                            </div>
                            <div class="grid-column span-12">
                                <div class="p1 rounded bg--gray-200">1/2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="grid-column span-8">
        <div class="p1 rounded bg--gray-200">1/3</div>
    </div>
</div>

Offsets

Offset columns with .offset- and then either a number or fractional class (like span's).

offset-4
offset-one-third
<div class="grid-row">
    <div class="grid-column offset-4 mb2"><div class="p1 rounded bg--gray-200">offset-4</div></div>
</div>

<div class="grid-row">
    <div class="grid-column offset-one-third"><div class="p1 rounded bg--gray-200">offset-one-third</div></div>
</div>