CSS Responsive Ready Columns

by Mark-Anthony
in Tutorials
posted November 16, 2015

Using the CSS column-rule is a great way to create CSS responsive ready columns that allow you to transform your content into even columns without the need of media queries. If you’re designing with a fluid layout, your columns will actually respond automatically. However, using the column-count rule in CSS can be a great responsive ready alternative. The CSS column rules can be applied to a <div></div> element or an <article></article> element.

CSS Responsive Ready Columns Gif

Declare Column Count and Width.

There are three ways to declare your columns and width sizes:

Declare column-count.
Declare column-width.
Declare both is recommended.

You will also need to add browser support for the column rules. ( -webkit = iOS, Chrome | -moz = Mozilla Firefox | -o = Opera )

Example:

Below, I have declared 4 columns at a width of 220px for each column.

declare number of columns and width

Declare Column Gaps.

To add a gutter between columns, use the column-gap rule:

declare column gap

Get Fancy with The Column-Rule-Style.

If you want to get really fancy and add some column dividers, use the column-style rule:

declare column style

You can change the decoration of your rule-style options to either of the following: solid; dotted; dashed; groove; or ridge;

Live Demo: CSS Responsive Ready Columns.

Scale your browser from the bottom right corner to see the responsive columns in action… or head over to CodePen and view the demo.

[codepen_embed height=”400″ theme_id=”20953″ slug_hash=”GpzvxL” default_tab=”result” user=”iteachai”]See the Pen <a href=’http://codepen.io/iteachai/pen/GpzvxL/’>GpzvxL</a> by Mark-Anthony Karam (<a href=’http://codepen.io/iteachai’>@iteachai</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

[button link=”http://codepen.io/iteachai/pen/GpzvxL” size=”large” text_size=”beta”]View on CodePen[/button]

Download the code