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.

Q for you: Have you used columns in your layout? Did you stick with floats or did you try the CSS3 approach?
Leave a comment below and let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *

Endorsed by these folks ...

Femy previously worked at 3marketeers as a front-end developer and recently returned as a freelancer to help us out during several busy months. She is talented and hard-working and handled surprise rush projects with great flexibility and positivity. It was very easy to work with her on the projects I managed.

Katarina Johannesson Art Director at 3marketeers Advertising