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).
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.
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.