basicGrid

One grid to rule them all

A mobile-first, Foundation-like grid system based on the CSS3 flex display property. Customizable with up to twelve columns, written in SASS and perfect for all sorts of layouts.

Mobile First

Even when you don't like the mobile-first approach, it's the best approach for a grid system. Smaller breakpoints automatically apply on all larger sizes, making it super easy to build responsive sites.

CSS Flexbox

basicGrid uses Flexbox. Columns automatically have the same height when not specified otherwise. You can even align or distribute them in several ways and combinations. Complex layouts? No problem!

Custom Sizes

Fill a row with up to twelve columns. Breakpoint classes are generated from the names and sizes in the $sizes map. Specify your own breakpoints by overwriting the predefined SASS variable.

Sizes and Breakpoints

1
2
3
4
5

<div class="row">
    <div class="column small-6 medium-6 large-4"></div>
    <div class="column small-3 medium-auto large-4"></div>
    <div class="column small-3 medium-auto large-4"></div>
</div>
Documentation

Horizontal Alignment

1
2
3

<div class="row left-on-small center-on-medium right-on-large">
    <div class="column small-6"></div>
</div>
Documentation

1
2
3
4

<div class="row around-on-small between-on-large">
    <div class="column small-4"></div>
    <div class="column small-4"></div>
</div>
Documentation

Vertical Alignment

1
2
3
4

<div class="row top-on-small middle-on-medium bottom-on-large">
    <div class="column small-6"></div>
    <div class="column small-6"></div>
</div>
Documentation

Direction

1
2
3
4

<div class="row ltr-on-small rtl-on-medium">
    <div class="column small-6"></div>
    <div class="column small-6"></div>
</div>
Documentation

Order

1
2
3
4
5

<div class="row">
    <div class="column small-4 last-on-small"></div>
    <div class="column small-4"></div>
    <div class="column small-4 first-on-small origin-on-medium"></div>
</div>
Documentation

Offset

1
2
3
4
5

<div class="row">
    <div class="column small-2 small-offset-2"></div>
    <div class="column small-2 small-offset-4"></div>
    <div class="column small-2"></div>
</div>
Documentation

Push and pull

1
2
3
4

<div class="row">
    <div class="column small-10 small-push-2"></div>
    <div class="column small-2 small-pull-10"></div>
</div>
Documentation

Show and hide

1
2
3
4

<div class="row">
    <div class="column hide-on-medium show-on-large"></div>
    <div class="column show-on-medium hide-on-large"></div>
</div>
Documentation

Get started

Convinced? Want to learn more? Grab the source and documentation from GitHub or play with our demo on CodePen.