Cata Grid

A responsive grid system, percentage based widths & fixed pixel based gutters.

The Grid

Summary

Resize browser window to show varients

Variable column grid (1 - 12) based on a 1440px max width frame (all adjustable) using class:
.content1440 { max-width: 1440px; }

- Basic width is 1024px (all adjustable) using class:
.content1024 { max-width: 1024px; }

- Containing content is (all adjustable) using classes:
.content1024 { max-width: 1024px; }
.row { padding: 0 42px; }

- Gutter widths are (all adjustable)

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1

Equal width layout varients

6
6
4
4
4
3
3
3
3
2
2
2
2
2
2

Example Grid Usage

Four Column Equal Width Layout: Code

<div class="row responsiveGutter clearfix">
<div class="span-1-fourth col">
<div class="gutters"></div>
</div>
<div class="span-1-fourth col">
<div class="gutters"></div>
</div>
<div class="span-1-fourth col">
<div class="gutters"></div>
</div>
<div class="span-1-fourth col">
<div class="gutters"></div>
</div>
</div>

Four Column Equal Width Layout: Result

Offset layout examples

3
3
2
3
4
3
1
4
2
4

Example Offset Usage

Four Column Equal Width Offset: Code

<div class="row responsiveGutter clearfix">
<div class="span-1-fourth col">
<div class="gutters"></div>
</div>
<div class="span-1-fourth col">
<div class="gutters"></div>
</div>
<div class="span-1-fourth col offset-1-fourth">
<div class="gutters"></div>
</div>
</div>

Four Column Equal Width Layout: Result

Learn, understand, improve, repeat

Play

Change the layout, amount of columns, use different media-queries, think about information flow in your html structure. How can this work for you?

Use

Use in combination with what is best for your audience. A 'User First' approach is preferable to any specific device, users come to your site for the content.

Download

Feel free to download, play, experiment, steal, adapt or suggest improvements. After all we are all learning & developing, I welcome your comments.