The things you will love about CSS Grids

Fluid columns, fixed spacing

Enjoy the ease and adaptiveness of proportional columns combined with the consistency and predictability of fixed, pixel-width spacing.

Infinite nesting possibilities

Subdivide any column into further columns (and further columns). 2, 3, 4, whatever. Mix and nest as you please. Whatever you imagine, whatever you design, it can be done!

Consistent alignment

Keep your content properly aligned and spaced evenly across multiple levels of nesting. whatever your page width and however complex (or simple) the layouts you build.

Any page width

960, 1024, 1140... Be assured that your columns always remain evenly sized and spaced, whatever the width of your design.

Any column width

Use the default 2, 3, 4, 5 or 6-column grid layouts, mix in columns of 2/3rd, 3/5th, or any other size you may need!

Any gutter width

Maintain constant content spacing, and adjust according to your needs. 10 pixels, 20, you name it! Space your content anyway you like

The things you may take for granted

Simple

CSS Grids is easy and lean: all you need to do is respect a few simple markup rules

Lightweight

The CSS Grids file is super lightweight at only 0.4 Kb minified and compressed

Clean

No clearfixes, no "row" containers, no "first" or "last" classes, no unnecessary clutter

Robust

CSS Grids is set up in such a way, that your content and styling won't break your layout

Cross-browser

Tested on IE 7, 8 and 9, on Firefox, Chrome, Safari, and all the main mobile platforms

Responsive

Scales easily across varying screen resolutions, all the way down to tablets and smartphones

even-column grid layouts

1st block
2nd block
3rd block
4th block
5th block
6th block
7th block
8th block
9th block
10th block
11th block
12th block

variable-width column layouts

1/2
1/3
1/6
3/5
2/5
61.8% (golden ratio)
38.2%
2/3
1/3
3/4
1/4
4/5
1/5
5/6
1/6

a peak at nested layouts

1/1
1/4
of
1/1
1/4
of
1/1
1/4
of
1/1
1/4
of
1/1
1/2
of
1/1
1/2
of
1/1
1/6
of
1/1
1/6
of
1/1
1/6
of
1/1
1/6
of
1/1
1/6
of
1/1
1/6
of
1/1
1/3
of
1/1
1/3
of
1/1
1/3
of
1/1
1/3
of
1/3
of
1/1
1/3
of
1/3
of
1/1
1/3
of
1/3
of
1/1
1/5
of
1/3
of
1/1
1/5
of
1/3
of
1/1
1/5
of
1/3
of
1/1
1/5
of
1/3
of
1/1
1/5
of
1/3
of
1/1
1/2
of
1/3
of
1/1
1/4
of
1/3
of
1/1
1/4
of
1/3
of
1/1

responsive layouts

Here's an example of how the above layout structure might be made to respond across devices of different screen resolutions like tablets and smartphones, with just a few extra lines of CSS!

The markup structure

Three elements lie at the basis of the grid structure: grid containers, grid units and content wrappers. Put together, they make up a structure like so:

<grid-container>
<grid-unit>
<content-wrapper>...</>
</>
<grid-unit>
<content-wrapper>...</>
</>
etcetera...
</>

The logical structure (in an XML-kind of notation)

<div>
<div>
<div>Some content</div>
</div>
<div>
<div>Some more content</div>
</div>
etcetera...
</div>

The same in actual HTML markup

<ul>
<li>
<a href='#'>Some link</a>
</li>
<li>
<a href='#'>Another link</a>
</li>
etcetera...
</ul>

The same again but with different elements

In the last example, the <ul> element acts as the grid container, the <li> elements as grid units and the <a> elements as content wrappers. In the middle one, it's all divs. This does not matter for the layout: the grid mechanism works the same on any type of element, as long as the structure is respected.

The trick: dissociation of width and spacing

The power of this grid system lies in the dissociation of width and spacing between grid units and content wrappers. In short:

  1. Percentage-value widths are applied to the grid units, allowing for even distribution irrespective of the container's width.
  2. Pixel-value margins are applied to the content wrappers, adding up to fixed-width gutters between content.
  3. By default, inverse margins are applied to the grid containers, cancelling out the outer margins of the outer-most elements and thereby assuring that the latter align nicely with adjacent content (particularly important in the case of nesting).

That's all!

Markup example: a simple evenly distributed grid

Suppose we want to turn the above markup structure into a layout of 4 evenly-sized and evenly-spaced columns. As shown in the code on the right, we simply give the grid container the classes "grid", which tells the units to line up side by side, and "grid-4col", which tells them to each occupy a fourth of the available width.

This is actually how this site's main menu was set up (among other things).

<ul class="grid grid-4col">
<li>
<a href='#'>Some link</a>
</li>
<li>
<a href='#'>Another link</a>
</li>
etcetera...
</ul>

As above, but with grid container classes

A mixed-size column layout

In other cases, we might instead want to divide the content into different-size columns. In that case we just tell the units themselves how much space to occupy. See the example on the left.


This is how this paragraph and the ones above and below were divided between content (two third) and code snippet (one third).

<div class="grid">
<div class="col-2of3">
<div>Some content</div>
</div>
<div class="col-1of3">
<div>Some more content</div>
</div>
etcetera...
</div>

As above (middle), but with grid unit classes

An evenly-distributed grid layout with one different-size column

Both methods can easily be combined. This is the case for the footer of this page: its contents are aligned in a 5-column grid, that is: each of the content blocks occupies one fifth of the available width -- except for the third block, which takes up two fifth.


As you can see on the right, the markup to achieve this is again extremely simple and clean.

<div class="grid grid-5col">
<div>
<div>Some content</div>
</div>
<div>
<div>Some more content</div>
</div>
<div class="col-2of5">
<div>Even more content</div>
</div>
etcetera...
</div>

With grid container AND grid unit classes

and finally: nesting!

Imagine you want a page layout of two same-width columns, and inside the second column, you want content blocks layed out in a three-column grid. Again, the markup is again extremely simple and clean!


To see this and other examples of grid nesting, have a look at the demo page

<div class="grid grid-2col">
<div>
<div> Some content </div>
</div>
<div>
<div>
<div class="grid grid-2col">
<div>
<div> First block of nested content </div>
</div>
<div>
<div> Second block of nested content </div>
</div>
<div>
<div> Third block of nested content </div>
</div>
</div>
</div>
</div>
</div>

Two-column grid with simple content in the first block and a 3-column grid nested inside the second block

Download the CSS Grids Framework

Terms of use

CSS Grids is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.

By clicking the download button, you commit to the respective terms of use.

What's included?

  • the core gridding file, CSS-GRIDS.min.css
  • an optional CSS reset, reset.min.css
  • a "how to" and "demo" page to get you started
  • the custom CSS and javaScripts that come with it

What's next?

  1. Download the CSS using the big green button on the right
  2. Have a look at the demo page markup and the demo CSS
  3. Build your own layouts adjusting margins and styling to your needs
  4. If you run into problems, use the green button on the left to let me know
  5. If you like CSS Grids, please consider making a small donation