How to create column layouts using css

As the monitor sizes increase, it’s not practical to have one big chunk of text on your web page that takes up the width of the screen. Users often have trouble reading long lines of text. To keep your readers interested in your content, having column layouts is a great idea.

The traditional approach to breaking the content into columns is to use floats. With the advent of responsive development, this method has become code-intensive. The new CSS3 spec has come up with an easy alternative.

Here are two websites that use the column layout to break content.

How to create column layout using css
New York Magazine using the column layout

How to create column layout using css
Time Magazine using the column layout
The CSS Properties to create the column layouts
  • column-count: The number of columns you want to apply to the element.
  • column-width: The width of a single column.
  • column-gap: The width of the gap between the columns.
  • column-rule: The shorthand for column-rule-width, column-rule-style, column-rule-color. It is similar to the border shorthand. Its specifies the border of your column.
  • column-rule-width: The width of the border of your column (similar to the one for border).
  • column-rule-style: The style of the border of your column (similar to the one for border).
  • column-rule-color: The color of the border of your column (similar to the one for border).
  • column-span: Specify a value that tells the browser how many columns you want an element to span. This is good for headings and works like colspan and rowspan in tables.

Here is a simple layout using three basic column layout CSS properties: column-count, column-width, and column-gap.

See the Pen column layout simple by Femy Praseeth (@femkreations) on CodePen.

A sampling of the code

.columns{
  column-count:3;
  column-width:25%;
  column-gap: 10%;
}

Here is a layout where the columns are styled similar to border rule. The rule column-span is applied to the child element (h1) to break the column layout for that element.

See the Pen column layout with borders and colspan by Femy Praseeth (@femkreations) on CodePen.

A sampling of the code

.column-borders{
  column-width:50%;
  column-count:2;
  column-gap:100px;
  column-rule: 1px dotted #dcdcdc;
}
.column-borders h1{
  column-span:all;
  
}

This approach is a lot simpler than using floats and doing a ton of math to make sure the layouts don’t break on various screen sizes. To verify the browser support, check out Can I Use.

I hope this article will inspire you to handle column layouts in a simpler fashion.

TELL ME: Have you used columns in your layout? Did you stick with floats or did you try the CSS3 approach?

Subscribe by email
If you're an email kind of person, sign up below to get the latest blog posts in your inbox! You might get some free WordPress goodies from me:-).
I promise not to spam you or share your address.

Client Love

Femy has incredible attention to detail and is a pleasure to work with. Her design and programming skills are top notch. She is definitely one of the best web developers that I have worked with, and she’s made my job easier.

Lauren Potter Account Manager, Client Services, 3Marketeers