A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites.

Show Grid:
What's in the Pack?
  1. Sketch sheets for printing (PDF).
  2. Design layout templates (for Photoshop, InDesign and Illustrator).
  3. Code files with explanations (CSS, HTML).

The Structure

The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block.

Credit

By Avraham Cornfeld

Get the Drupal Theme

Possibilities

The total width of the grid is 994 pixels – which the majority of modern monitors support. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3, 2

/* This is an example 
of the HTML code 
for a 5-column div */

<div class="sg-5">
   ...
</div>

Code Structure

When writing your code just assign the "sg-" class to your box elements.

18 Column Grid

12 Column Grid

9 Column Grid

6 Column Grid

4 Column Grid

3 Column Grid

2 Column Grid

All Column Sizes

Golden Ratio