No products in the cart.

CSS Responsive Ready Columns

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

CSS Responsive Ready Columns Gif

Declare Column Count and Width.

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

  1. Declare column-count.
  2. Declare column-width.
  3. Declare both  is recommended.

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


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

declare number of columns and width

Declare Column Gaps.

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

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:
column style

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]

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

Discover more from mark-anthony.ca

Subscribe now to keep reading and get access to the full archive.

Continue Reading