A responsive CSS grid system helping desktop and mobile browsers play nicely together.

What is it?

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. Check out the demo.

Why use it?

Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

If the browser gets thin enough, the site will change to a mobile-friendly layout. Try resizing this page to give it a try (Internet Explorer 6-8 will be a fixed width page).

Who made it?

Columnal is a Pulp+Pixels project.

It is based on work from the fantastic people of cssgrid.net and 960.gs, who first made their code open and available. Please visit their sites for more information.

How Columnal is different

  • Built-in debugging CSS to show the structure of any pages being built
  • Sub-columns (columns within columns) for more layout options
  • Prefix and suffix for extra space within a column before or after content
  • Vertical spacing CSS classes
  • PDF of grid system for sketching out site before building
  • Wireframing templates
  • Columnal is in active development and you may run across bugs

Let us know what you think!

I am trying to make Columnal as useful a tool as possible, if you have a great idea, this is the place to say it! Also let us know if you have any issues using Columnal.

Magic of the Media Query

Columnal supports mobile layout through the use of media queries.

Old and new, happy together

Columnal works the best on modern browsers, either desktop or mobile. Mobile support really includes newer smartphones.

Most older browsers will work, Internet Explorer 6 and 7 degrade to either a 12-column 984px or 960px wide version.

Turn it up to 12 (Columns)

Columnal is divided horizontally into a series of 12 columns, and vertically into rows. 12 columns divide nicely into equal columns of two, three, four, or six columns.

In other words, a row consists of a series of columns that add up to 12. So, a row of 3+3+3+3 or 4+4+4 or 2+3+5+2, anything that adds to 12 will be the full width of the page.

Images, Video

Images or video wider than the column it is in will shrink to fit. Don't define image width or height inline, and good to go.

Demo image (sunset)

Enough chit chat, show me how to use it

Marky Markup

See a better example on the demo page.

<div class="container">
  <div class="row">
    <div class="col_7 pre_1">
    <div class="col_2">
    ...
    </div>
    <div class="col_2 last">
    ...
    </div>
  </div>
</div>
Version History
0.85
Combined type-image.css, mobile.css, and columnal.css all into columnal.css for fewer http calls when using columnal. Also set IE9 to use media queries instead of fixed-width like older Internet Explorer versions.
0.82
Small cleanup, removing unnecessary colors set in type-image.css
0.81
Added Balsamiq Mockups wireframing template, and moved website building css classes to build.css file since they are otherwise unused.
0.8
Big one! Updated reset code from Eric Meyer to 2.0, Internet Explorer 6 and 7 set to a fixed pixel width (984px), Internet Explorer 8 will now react fluidly (with the option setting a fixed-width as before), and added a wireframe template for Adobe Illustrator CS2+ (more formats coming).
0.7
Corrected issue in mobile.css with sub-columns used in a 12 column parent, added sketch sheets PDF for sketching out page concepts.
0.61
Fixed display issues in demo online and in Columnal download file.
0.6
Renaming of some css files for more clear use, explanation of CSS files in README.txt. Also removed compressed versions of CSS files for clarity.
0.5
Initial release, including latest version of cssgrid.net base (version 1.6)

Columnal CSS Classes

.container

(In common with cssgrid.net) The container is the full page width and allows a background behind column content. It is the highest element of the grid system and contains the other main elements, .row and columns. There's no set way to use .container, it can be the entire web page, or a page could be used to separate a site into separate containers of content.

.row

(In common with cssgrid.net) The .row class is placed within .container and contains the columns. It also limits the width of the content to the max and minimum widths.

.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12

The classes for the columns. As stated earlier, in a row, the columns can be used in any combination if they add up to 12.

Sub-columns (same classes as above)

Sub-columns will work in Columnal (columns within columns) and will flatten to a single column on mobile devices, the same way as the normal columns. (A sub-column would be any column inside another like two .col_4 inside of a .col_8). One thing to note is that sub-columns will only work up to one level deep.

.last, .omega

(In common with cssgrid.net.) In a row, the last column needs .last or .omega, it is a class that removes the right margin so the columns fit correctly within a row (.omega is included for people who use the 960.gs grid system and are used to the naming convention.)

.pre_1, .pre_2, .pre_3, .pre_4, .pre_5, .pre_6, .pre_7, .pre_8, .pre_9, .pre_10, .pre_11

(Concept from the 960.gs grid) “Prefix” classes that can be used for spacing within a column without adding extra markup simply for spacing purposes. (For example, will allow for a <div class="pre_6 col_6"> to be used in place of something like two sets of <div class="col_6> for a row).

.suf_1, .suf_2, .suf_3, .suf_4, .suf_5, .suf_6, .suf_7, .suf_8, .suf_9, .suf_10, .suf_11

(Concept from the 960.gs grid.) “Suffix” classes that can be used for spacing within a column without adding extra markup simply for spacing purposes. (For example, will allow for a <div class="pre_6 col_6"> to be used in place of something like two sets of <div class="col_6> for a row).

.margin_top_5, .margin_top_15, .margin_top_25, .margin_top_30, .margin_top_35, .margin_top_45, .margin_top_60, .margin_top_90, .margin_top_120

Built-in classes to control top margin on elements. (Recommended for rapid prototyping).

.margin_bottom_5, .margin_bottom_15, .margin_bottom_25, .margin_bottom_30, .margin_bottom_35, .margin_bottom_45, .margin_bottom_60, .margin_bottom_90, .margin_bottom_120

Built-in classes to control bottom margin on elements. (Recommended for rapid prototyping).

.padding_top_15, .padding_top_30, .padding_top_45, .padding_top_60, .padding_top_90, .padding_top_120,, .padding_top_130

Built-in classes to control top padding on elements. (Recommended for rapid prototyping).

.padding_bottom_15, .padding_bottom_30, .padding_bottom_45, .padding_bottom_60, .padding_bottom_90, .padding_bottom_120, .padding_bottom_130

Built-in classes to control bottom padding on elements. (Recommended for rapid prototyping).

.reverse

Use on dark backgrounds, the .reverse class will reverse type inside of it so it is readable.

.mobile-hide

Hide content from the mobile, single-column view using the .mobile-hide class. Content will display on wider browsers.

.mobile-only

Only show content on the mobile, single-column view using the .mobile-only class. Content will not display on wider browsers.

Build.css

.test

Use .test class on a .container div, and all columns within it will be highlighted to make debugging any layout issues easier. See the demo page for what this looks like.

.bg000 to .bgfff

Classes for gray boxing a site design, useful when constructing a page for the first time. More about the gray box technique. This is a similar idea, but for using the gray box technique while prototyping a page in the browser.

Support for Internet Explorer 6 and 7

“Fixed pixel” css files

There are two fixed pixel dimensions to use for Internet Explorer 6 and 7 built into Columnal since version 0.8. “fixed-984px-ie.css” sets the page width to 984px, and “fixed-960px-ie.css” sets the page width to the popular 960px page width standard.

Full-width images in columns for IE6

Internet Explorer does not provide a great way to resize images. Since images in columns will be wider than the column (since images are meant to scale with the grid in most browsers) this needs to be addressed. The fix built into columnal requires a css be included to address shortcomings specific to the IE6 browser. For images, the two css files for this are “ie6-984px.css” or “ie6-960px.css”, these must be used in pair with the “fixed pixel” css files mentioned previously. Adding a class name of “.fullwidth” sets a width on the image equal to the width of the column it is in, fixing width problems in IE6, but the class name must be used.