Grater

CSS grids as easy to use as a cheese grater. Read the philosphy behind this super simple grid system here.

Simply download grater.css to get started. You can also install it as a gem if you are using Rails 3.1 or higher with the asset pipeline (see below).

ianpatrickhines fork

Grater was originally made by Sam Soffes as a CSS file and ruby gem. I haven't really changed anything, but I have:

• reformatted the CSS file and added some comments; and
• removed all the Ruby.

Usage

Simply structure some HTML like this:

<div class="grater">
  <div>
    <p>This is on the left or on top when things get narrow.</p>
  </div>
  <div>
    <p>This is on the right or on the bottom when things get narrow.</p>
  </div>
</div>

You can also use the reverse version:

<div class="grater reverse">
  <div>
    <p>This is on the right or on top when things get narrow.</p>
  </div>
  <div>
    <p>This is on the left or on the bottom when things get narrow.</p>
  </div>
</div>

Important: div.grater is intended to be enclosed in a 640px or 300px container. You can optionally add <div class="grater-container"> around it to get this functionality.