Grid Layout

New

SPECS

Screen size	Gutter	Width	Layout columns
Mobile portrait
0-478 375 primary mobile design size	16	100%	6
Mobile landscape
479-767	16	100%	6
Tablet
768-991 768 primary tablet design size	32	100%	8
Desktop
992-1280	32	100%	12
1281-1920 1920 primary desktop design size	32	100%	12

Examples

6 COLUMNS SM, 8 COLUMNS MD, 12 COLUMNS LG

<div class="grid-layout">
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
    <div class="grid-col-sm-1 grid-col-md-1 grid-col-lg-1"></div>
</div>

1 ITEM PER ROW SM, 2 ITEMS PER ROW MD, 3 ITEMS PER ROW LG

<div class="grid-layout">
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
    <div class="grid-col-sm-6 grid-col-md-4 grid-col-lg-4"></div>
</div>

Responsive (Should Match 2nd Example)

<div class="grid-layout">
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
    <div class="grid-col-responsive"></div>
</div>

1 ITEM PER ROW SM, 1 ITEMS PER ROW MD, 2 ITEMS PER ROW LG

<div class="grid-layout">
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
    <div class="grid-col-responsive grid-col-responsive--1-1-2"></div>
</div>

OFFSET (2 COLUMNS)

offset

<div class="grid-layout">
    <div class="grid-col-responsive grid-col-sm-offset-2 grid-col-md-offset-2 grid-col-lg-offset-2"></div>
</div>

EXAMPLE (CARD GRID)

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Morbi orci purus, scelerisque at quam eu, venenatis facilisis nulla.

Suspendisse iaculis tellus quis mi ullamcorper, quis molestie ante eleifend

Curabitur feugiat ex et fermentum ultricies. In at aliquam dolor.

Cras ut ex et tortor tempus sodales et in risus

Ut id iaculis erat, ut euismod neque. Nulla lacinia justo at sem pulvinar faucibus.

Mauris luctus sit amet libero vitae consectetur

Pellentesque pharetra blandit magna in vestibulum. Sed volutpat malesuada ex at blandit. Suspendisse in enim nec odio tempus ultricies ac nec nisi.

Maecenas venenatis nisi ac justo cursus mattis

Fusce id facilisis tortor, auctor ultrices ligula. Nullam at elementum sapien. Curabitur tempor ultricies magna, quis interdum purus condimentum a. In ac dictum sapien.

Duis condimentum ex vitae diam euismod dignissim

Sed nulla lorem, aliquam a condimentum ac, iaculis eget lectus. Suspendisse luctus facilisis velit ut lobortis. Integer tristique rhoncus metus at porttitor.

<div class="grid-layout padding-x-0 margin-bottom-200">
    <div class="grid-col-responsive full-height card-generic">
        <h2 class="fixed-subheading-03 margin-bottom-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
        <p class="fixed-body margin-bottom-400">Morbi orci purus, scelerisque at quam eu, venenatis facilisis nulla.</p>
    </div>
    <div class="grid-col-responsive full-height card-generic">
        <h2 class="fixed-subheading-03 margin-bottom-400">Suspendisse iaculis tellus quis mi ullamcorper, quis molestie ante eleifend</h2>
        <p class="fixed-body margin-bottom-400">Curabitur feugiat ex et fermentum ultricies. In at aliquam dolor.</p>
    </div>
    <div class="grid-col-responsive full-height card-generic">
        <h2 class="fixed-subheading-03 margin-bottom-400">Cras ut ex et tortor tempus sodales et in risus</h2>
        <p class="fixed-body margin-bottom-400">Ut id iaculis erat, ut euismod neque. Nulla lacinia justo at sem pulvinar faucibus.</p>
    </div>
    <div class="grid-col-responsive full-height card-generic">
        <h2 class="fixed-subheading-03 margin-bottom-400">Mauris luctus sit amet libero vitae consectetur</h2>
        <p class="fixed-body margin-bottom-400">Pellentesque pharetra blandit magna in vestibulum. Sed volutpat malesuada ex at blandit. Suspendisse in enim nec odio tempus ultricies ac nec nisi.</p>
    </div>
    <div class="grid-col-responsive full-height card-generic">
        <h2 class="fixed-subheading-03 margin-bottom-400">Maecenas venenatis nisi ac justo cursus mattis</h2>
        <p class="fixed-body margin-bottom-400">Fusce id facilisis tortor, auctor ultrices ligula. Nullam at elementum sapien. Curabitur tempor ultricies magna, quis interdum purus condimentum a. In ac dictum sapien.</p>
    </div>
    <div class="grid-col-responsive full-height card-generic">
        <h2 class="fixed-subheading-03 margin-bottom-400">Duis condimentum ex vitae diam euismod dignissim</h2>
        <p class="fixed-body margin-bottom-400">Sed nulla lorem, aliquam a condimentum ac, iaculis eget lectus. Suspendisse luctus facilisis velit ut lobortis. Integer tristique rhoncus metus at porttitor.</p>
    </div>
</div>

EXAMPLE (CARD GRID - EQUAL HEIGHT ROWS)