HTML5 Zone is brought to you in partnership with:

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5. Paul is a DZone MVB and is not an employee of DZone and has posted 131 posts at DZone. You can read more from them at their website. View Full User Profile

Using CSS3 Columns

11.06.2012
| 3396 views |
  • submit to reddit

When it comes to designing a website it's really handy to use a grid system to help. Using a grid system allows you to easily space out and line up different content on the page. A grid system makes it really easy for your visitors to follow the flow of content.

For the developer they are great, you don't need to work out any maths when changing the layout of the page. If you want to increase the width of the whole page you can do it in one place and everything else increases inside it.

There are loads of already created CSS grid frameworks out there that already do all the maths for you. Some even give you a form to customise how large you want each grid, how large you want the margin and it will create the entire CSS grid for you.

CSS Grid Frameworks

Here is a list of some good CSS grid frameworks. Take your pick try one out.

ZURB CSS Grid Builder

Zurd CSS Grid Builder

At ZURB we use a flexible grid framework that lets us rapidly prototype and implement sites. Recently we'd been creating some variant grids for different widths and gutter sizes so we thought, 'why not just create grids on the fly with a simple tool?'

ZURB CSS Grid Builder

Blueprint CSS Grid Generator

CSS Blueprint

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Blueprint CSS Grid Generator

Tiny Fluid Grid

Tiny Fluid Grid

Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.

Tiny Fluid Grid

960 Grid System

Fluid 960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

960 Grid System

Do you know any other good CSS frameworks? Please comment with them at the end of this post.

New CSS Columns

If you don't want to use any of these frameworks and don't want to create your own, there is a new feature with CSS3. This new feature allows you to create CSS3 columns without doing any maths on widths, margins etc it will work it all out for you.

All you have to do is tell it how many columns you want and how big of a gap you want and it will work out the correct width of the columns.

The CSS properties we need are:

  • Column-count - The amount of columns you want to create.
  • Column-gap - The distance between the columns.
  • Column-rule - The style of the rule in between the columns.
  • Column-rule-color - The color of the rule
  • Column-rule-style - The style of the rule
  • Column-rule-width - Total width of the rule
  • Column-span - Amount of columns the element spans across
  • Column-width - Width of the column

Browser Support

The problem with this property is that it's not yet supported by most browsers and it's not going to be supported on IE until version 10.

  • IE un-prefixed in version 10.
  • Chrome currently supported with -webkit- prefix.
  • Safari currently supported with -webkit- prefix.
  • Firefox currently supported with -moz- prefix.
  • Opera currently supported un-prefixed.

CSS Column Examples

In this example we are going to use the CSS3 column features to show how to style a page with simple CSS.

For this HTML we are going to create a 1 column layout, 2 column layout, 3 column layout, 4 column layout, 6 column layout and a 12 column layout.

Example of CSS3 columns
<div class="col-1">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div>Column 6</div>
<div>Column 7</div>
<div>Column 8</div>
<div>Column 9</div>
<div>Column 10</div>
<div>Column 11</div>
<div>Column 12</div>
</div>
<div class="clearfix"></div>
<div class="col-2">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div>Column 6</div>
<div>Column 7</div>
<div>Column 8</div>
<div>Column 9</div>
<div>Column 10</div>
<div>Column 11</div>
<div>Column 12</div>
</div>
<div class="clearfix"></div>
<div class="col-3">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div>Column 6</div>
<div>Column 7</div>
<div>Column 8</div>
<div>Column 9</div>
<div>Column 10</div>
<div>Column 11</div>
<div>Column 12</div>
</div>
<div class="clearfix"></div>
<div class="col-4">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div>Column 6</div>
<div>Column 7</div>
<div>Column 8</div>
<div>Column 9</div>
<div>Column 10</div>
<div>Column 11</div>
<div>Column 12</div>
</div>
<div class="clearfix"></div>
<div class="col-6">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div>Column 6</div>
<div>Column 7</div>
<div>Column 8</div>
<div>Column 9</div>
<div>Column 10</div>
<div>Column 11</div>
<div>Column 12</div>
</div>
<div class="clearfix"></div>
<div class="col-12">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div>Column 6</div>
<div>Column 7</div>
<div>Column 8</div>
<div>Column 9</div>
<div>Column 10</div>
<div>Column 11</div>
<div>Column 12</div>
</div>

The CSS

Below is the CSS for to style the CSS columns.

div.col-1,
div.col-2,
div.col-3,
div.col-4,
div.col-6,
div.col-12{
	margin:20px 0;
	-webkit-column-width: 10px;
	-moz-column-width: 10px;
	column-width: 10px;
	-webkit-column-gap: 5px;
	-moz-column-gap: 5px;
	column-gap: 5px;
}
div.col-1 {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}
div.col-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
div.col-3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
div.col-4 {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}
div.col-6 {
  -webkit-column-count: 6;
  -moz-column-count: 6;
  column-count: 6;
}
div.col-12 {
  -webkit-column-count: 12;
  -moz-column-count: 12;
  column-count: 12;
}

View the demo to see what this will create.

Demo




Published at DZone with permission of Paul Underwood, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)