The
Square
Grid
A New Way of Designing Websites
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.
What's in the Pack?
- Sketch sheets for printing (PDF).
- Design layout templates (for Photoshop, InDesign and Illustrator).
- 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.
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.