CSS3 Columns Property

Here is a brief description of how to specify the column width and column count in CSS3 using the shorthand property columns.

Explanation

CSS3 supported multi columns to arrange the text as news paper structure.
Most common multi columns properties are as follows:
  • column-count
  • column-rule
  • column-gap
  • column-span
  • column-width
  • column-fill

Property :

columns: auto|column-width column-count|initial|inherit;


Where,
auto - Default value. Sets both the column-width to "auto" and the column-count to "auto".
column-width - The width of the columns.
column-count - The number of columns.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


columns: 300px 2;

Definition:

The columns property is a shorthand property for setting column-width and column-count.

It takes the following values.
  • column-width:Specifies the width of the columns.
  • column-count : Specifies the number of columns

Example :
<style>
.demodiv {
width:500px;
border:2px solid grey;
columns: 100px 3;
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
}
</style>
<div class='demodiv'>
We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users.
If you are designing a website, then you can find all the resources you need for webmasters and web developers such as
free scripts, web tools, programming tutorials, web design and applications, clipart images, web icons etc.
Free website contents that help to develop, build, promote and maintain a web site.
</div>

Result:

We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users. If you are designing a website, then you can find all the resources you need for webmasters and web developers such as free scripts, web tools, programming tutorials, web design and applications, clipart images, web icons etc. Free website contents that help to develop, build, promote and maintain a web site.


Ask Questions

Ask Question