Unprecedented Control

Twelve columns. Six columns. Nine columns. As many columns as you want, in as many combinations as you want.

$col-groups: (12, 6, 9);

Fixed width gutters

No fluid gutter width bullcrap. This is the real deal. What you set is what you get.

$gutter-width: 20px;

Easy to use, hard to break

It takes just a few lines of code to start using Toast. And it’ll work all the way down to IE8.

<div class="grid">
  <div class="grid__col grid__col--3-of-5 grid__col--centered">
    <p>Centered columns? No problem.</p>
  </div>
  <div class="grid__col grid__col--3-of-5 grid__col--push-1-of-5">
    <p>Push and pull columns in plain English.</p>
  </div>
</div>

Limitless* possibilities

Nested grids, custom namespaces, simple switches for features like pulls and pushes, responsive layouts, and more. Start using Toast today.

View on GitHub Download Quickstart CSS