CSS3 Multiple Columns

CSS3 Multiple Columns

CSS3 Multiple Columns

Like many of the good features of CSS3 like animations, effects etc.. CSS3 Multiple columns feature is very useful. CSS3 multiple columns helps us to create columns of text, as we see in the above image. This kind of column layouts we see in books and news papers. This structure can be achieved with CSS3 Multiple Columns. This helps a web developer to display the text fitted into columns.

CSS3 Multiple Columns properties

When we use CSS3 multiple columns in our development, we should know three ‘column properties’. They are:
column-count,
column-width,
column-gap,
column-rule.

* The column-count property sets the number of columns to be displayed.
* The column-width is used to specify column width.
* The column-gap property set the gap between columns.
* The column-rule-style CSS property lets you to set the style of the rule drawn between columns in multiple column layouts.

HTML for CSS3 Multiple Columns

<div class="multiple-columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

CSS for CSS3 Multiple Columns

.multiple-columns {
    -webkit-column-count:3; /* Chrome, Safari, Opera */
    -moz-column-count:3; /* Firefox */
    column-count:3;

    -webkit-column-gap:30px; /* Chrome, Safari, Opera */
    -moz-column-gap:30px; /* Firefox */
    column-gap:30px;

    -webkit-column-rule:4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule:4px outset #ff00ff; /* Firefox */
    column-rule:2px outset #C5C5C5;
}

Here we set the number of columns to 3 and the gap between the columns to 30px. And we are adding the column border 2px. We can use column-width for specifying the column width, if we are not using number of columns. If we are not mentioning the number of columns, browser will automatically adjust the text to multiple columns in a maximum possible way.

Demo for CSS3 Multiple Columns

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

CSS3 Multiple Columns Height Balancing

The CSS3 Multiple Columns specification requires that the column heights must be balanced. The browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. However, in some situations it is also useful to set the maximum height of the columns explicitly. Thus the lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column.

The CSS3 multiple columns layout extends the block layout mode to allow the easy definition of multiple columns of text. The use of CSS3 multiple columns reduce the trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. So best way is to use CSS3 multiple columns.

Browser Support

Currently CSS3 multiple column is supported in -webkit browsers, -moz browsers, Opera 11.1 and IE 10 browsers.

label, , , , , , , , , , , , , , , , ,

About the author