Search within TutorialsPark

CSS3 Multiple Columns


Use CSS3 multiple Columns to layout Content in multiple Vertical Columns, just like a newspaper.


CSS3 Multiple Columns

1. The CSS3 Multiple Column Layout Module enables you to create multiple columns of same width and height and uniform gap between them .

2. But Text can still flows continuously from one column to another, elements that are wider than the column width are clipped.

3. Studies have proved that people have difficulty reading longer line of text, hence multiple columns are created to utilize the wider screens to it optimum, just like a newspaper.


Methods to create Column Layout

1. You can create Multiple Columns in two way.

Prescriptive Column : By Specifying the Number of Columns to want.

Dynamic Column : By Specifying the width of the Columns, and the browser calculates the number of columns.


Prescriptive Columns: column-count

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing orci non vulputate rhoncus. Phasellus mi massa, iaculis a massa ut, hendrerit mollis risus. Curabitur consequat aliquam est id ornare.

Cras rutrum, felis sit amet interdum venenatis, justo nisl dictum eros, et imperdiet libero dui eget erat. Nunc tristique enim congue diam rutrum pretium eu nec enim.

Pellentesque dignissim, urna eget blandit bibendum, eros mi adipiscing enim, ac ultrices eros libero nec velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris cursus nulla sit amet ipsum hendrerit, ornare lacinia felis luctus.


column-count: 2;

1.CSS3 property column-count is used to specify the number of columns.The value must be an integer and greater than zero.

Example: CSS3 Multiple Column using column-count property

Give it a TRY! »


Dynamic Columns: column-width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing orci non vulputate rhoncus. Phasellus mi massa, iaculis a massa ut, hendrerit mollis risus. Curabitur consequat aliquam est id ornare.

Cras rutrum, felis sit amet interdum venenatis, justo nisl dictum eros, et imperdiet libero dui eget erat. Nunc tristique enim congue diam rutrum pretium eu nec enim.

Pellentesque dignissim, urna eget blandit bibendum, eros mi adipiscing enim, ac ultrices eros libero nec velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris cursus nulla sit amet ipsum hendrerit, ornare lacinia felis luctus.


column-width: 150px

1. CSS3 property column-width is used to set the width of the column, the browser then creates as many columns of specified width within the parent element.

Give it a TRY! »


Multiple Columns shorthand : columns property

1. You can use the shorthand columns to set both the column-count and column-width in a single declaration.

Example: Multiple Columns Shorthand - columns

Give it a TRY! »


Setting Column Rule

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing orci non vulputate rhoncus. Phasellus mi massa, iaculis a massa ut, hendrerit mollis risus. Curabitur consequat aliquam est id ornare.

Cras rutrum, felis sit amet interdum venenatis, justo nisl dictum eros, et imperdiet libero dui eget erat. Nunc tristique enim congue diam rutrum pretium eu nec enim.

Pellentesque dignissim, urna eget blandit bibendum, eros mi adipiscing enim, ac ultrices eros libero nec velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris cursus nulla sit amet ipsum hendrerit, ornare lacinia felis luctus.

column-rule-style:

1. A Vertical rule can be created to seperate the columns, the width of the column rule is not added to the total width. The properties are given below

Table: Column Rule Properties

Property Description Value
column-rule-color Specifies the color of the rule <color>
column-rule-style Specifies the style of the rule Same as border styles
column-rule-width Specifies the width of the vertical rule <length>, <em>, <%>
column-rule Shorthand to set column-rule* properties in a single declaration. <width>, <style>, <color>

Examples: Columns Rule Properties

Give it a TRY! »


Setting the Column-Gap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing orci non vulputate rhoncus. Phasellus mi massa, iaculis a massa ut, hendrerit mollis risus. Curabitur consequat aliquam est id ornare.

Cras rutrum, felis sit amet interdum venenatis, justo nisl dictum eros, et imperdiet libero dui eget erat. Nunc tristique enim congue diam rutrum pretium eu nec enim.

Pellentesque dignissim, urna eget blandit bibendum, eros mi adipiscing enim, ac ultrices eros libero nec velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris cursus nulla sit amet ipsum hendrerit, ornare lacinia felis luctus.


column-gap: 20px;

1. To gap in between the column can be set using CSS3 property column-gap, the default gap is around 1em.

Examples: Setting the gap with column-gap rule

Give it a TRY! »


Spanning Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing orci non vulputate rhoncus. Phasellus mi massa, iaculis a massa ut, hendrerit mollis risus. Curabitur consequat aliquam est id ornare.

Header

Cras rutrum, felis sit amet interdum venenatis, justo nisl dictum eros, et imperdiet libero dui eget erat. Nunc tristique enim congue diam rutrum pretium eu nec enim.

Pellentesque dignissim, urna eget blandit bibendum, eros mi adipiscing enim, ac ultrices eros libero nec velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris cursus nulla sit amet ipsum hendrerit, ornare lacinia felis luctus.

column-span:

1. You can make your elements to span across multiple columns using the property column-span. It can assume two values:

all: The element can span all the column of multi-column.

none: The element does not span multiple columns. Its the default

Example: Spanning Column using column-span

Give it a TRY! »


Controlling how columns are filled

1. You can control the way columns are filled using the property column-fill. It takes two values

balance : All the columns appear to have the same amount of content. This is the default.

auto : Columns are filled sequentially. Hence some columns are partially filled or even empty

Example: Controlling how columns are filled

Give it a TRY! »