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.

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.

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.