Grid

The Grid

We provide a mobile-first, fluid grid to help layout pages with ease. To start a new grid, create a div with the class of .col-container. Then add columns inside it using .col .col-n-xs, where n = 5-100 in increments of 5, with the addition of 33 to let us do columns in thirds.

Important: Column classes should generally be used on container elements. It's bad practice to apply grid-based widths directly to elements such as form fields, headers or images. Also, avoid applying styles directly to a column element. Instead, nest your content within the column and apply styling there.

<div class="col-container">
<div class="col col-30-xs border-mid-xs">.col .col-30-xs</div>
<div class="col col-20-xs border-mid-xs">.col .col-20-xs</div>
<div class="col col-50-xs border-mid-xs">.col .col-50-xs</div>
</div>

Grid Max-Width

By default, our grid will span 100% of the browser viewport. If you want to control that, add .col-max next to your .col-container class. This will limit the width of the grid to 1260px.

<div class="col-container col-max">
<div class="border-dark-xs p-2-xs">1260px max-width</div>
</div>

Nesting Columns

Each column in our grid can hold another set of columns inside of it. To make things work properly nest another .col-container inside the .col.

<div class="col-container">
<div class="col col-50-xs border-xs">
<span class="block-xs m-b-1-xs">.col .col-50-xs</span>
<div class="col-container">
<div class="col col-30-xs border-dark-xs">.col .col-30-xs</div>
<div class="col col-30-xs border-dark-xs">.col .col-30-xs</div>
<div class="col col-40-xs border-dark-xs">.col .col-40-xs</div>
</div>
</div>
<div class="col col-50-xs border-xs">
<span class="block-xs m-b-1-xs">.col .col-50-xs</span>
<div class="col-container">
<div class="col col-20-xs border-dark-xs">.col .col-20-xs</div>
<div class="col col-60-xs border-dark-xs">.col .col-60-xs</div>
<div class="col col-20-xs border-dark-xs">.col .col-20-xs</div>
</div>
</div>
</div>

Gutters

The Leap grid doesn't include gutter by default. But there are times when you want to include gutters between your grid. For those times, we have .col-gutters, which can be added next to .col-container to automatically assign gutters to the internal columns. You may also choose to apply gutters manually (for a little more control) by using our padding utility classes next to the column classes.

Automatic Gutters

Gutters will not be applied to nested columns unless applied to its parent container.

<div class="col-container col-gutters">
<div class="col col-40-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-60-xs">
<div class="col-container">
<div class="col col-33-xs border-mid-xs">.col</div>
<div class="col col-33-xs border-mid-xs">.col</div>
<div class="col col-33-xs border-mid-xs">.col</div>
</div>
</div>
</div>

Manual Gutters

With manual gutters, any styling should be applied to a nested element, not the columns themselves.

<div class="col-container">
<div class="col col-30-xs p-r-1-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-30-xs p-r-5-xs">
<div class="border-mid-xs">.col</div>
</div>
<div class="col col-40-xs">
<div class="border-mid-xs">.col</div>
</div>
</div>

Centering Columns

Sometimes you want to center a single column within its container. This is possible by adding .col-center next to your .col col-n-xs class. You may also control column centering by using our margin and float utility classes. Simply apply .m-auto-xs .float-none-xs and you'll get the same styles as .col-center.

<div class="col-container border-xs p-1-xs m-b-1-xs">
<div class="col col-50-xs col-center border-dark-xs">.col .col-50-xs .col-center</div>
</div>
<div class="col-container border-xs p-1-xs">
<div class="col col-30-xs col-center border-dark-xs">.col .col-30-xs .col-center</div>
</div>

Column Offsets

Move columns over by different grid widths by using .col-offset-n-xs. Keep in mind that the columns and offsets used within a .col-container shouldn't add up to more than 100.

<div class="col-container border-xs p-1-xs m-b-1-xs">
<div class="col col-40-xs border-dark-xs">.col-40-xs</div>
<div class="col col-40-xs col-offset-20-xs border-dark-xs">.col-40-xs .col-offset-30-xs</div>
</div>

Responsive Breakpoint Classes

Our mobile first grid comes with a set of breakpoint class suffixes that can be used to override columns across breakpoints. For example, if a div needs to take up the full width of the page across all display sizes, use .col-100-xs. If that same div needs to be half width at the medium breakpoint and a quarter at our large breakpoints, add .col-50-md and .col-33-lg. Resize the browser to see the effect in action. Note that there are also suffixes for small and extra large. You can learn more about the breakpoints in our responsive documentation

<div class="col-container">
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
<div class="col col-100-xs col-50-md col-25-lg border-dark-xs">
<span class="block-xs hide-md hide-lg">.col-100-xs</span>
<span class="hide-xs block-md hide-lg">.col-50-md</span>
<span class="hide-xs block-lg">.col-25-lg</span>
</div>
</div>