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
Declare Column Count and Width.
There are three ways to declare your columns and width sizes:
- Declare both is recommended.
You will also need to add browser support for the column rules. ( -webkit = iOS, Chrome | -moz = Mozilla Firefox | -o = Opera )
Declare Column Gaps.
Get Fancy with The Column-Rule-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.