CSS Responsive Ready Columns

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 )

Example:

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.

See the Pen GpzvxL by Mark-Anthony Karam (@iteachai) on CodePen.20953

 

 

+ There are no comments

Add yours