CSS Column Layout
Jakob Jenkov |
From CSS 3.0 it is possible to split text into multiple columns, just like the newspapers do. CSS 3.0 comes with a set of CSS properties for column layout. I will explain these column CSS properties in this text.
column-count
The first of the CSS properties for column layout is column-count.
The column-count CSS property enables you to set a number of columns that the content of an HTML
element is to be divided into. Here is a column-count example:
p.twoColumns {
column-count: 2;
}
This example sets column count to 2 for all p elements with the CSS class twoColumns.
At the time of writing, in Firefox, Chrome and Safari you had to use their special prefixes, like this:
p.twoColumns {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
This should make it work in Internet Explorer, Firefox, Chrome and Safari.
Here is how a p element looks with this CSS applied (plus a border to make the effect more visible):
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
You can also set column layout for div elements containing p elements. In that case
the content will be split into paragraphs, and the paragraphs divided into columns. Thus, a column may contain
less or more than one paragraph. Here is an example:
<div style="border: 1px dotted #cccccc;
column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;">
<p>
This is the first paragraph. This is the first paragraph.
This is the first paragraph. This is the first paragraph.
This is the first paragraph. This is the first paragraph.
This is the first paragraph. This is the first paragraph.
</p>
<p>
This is the second paragraph. This is much shorter than
the first paragraph.
</p>
</div>
Here is how that looks in the browser:
This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph.
This is the second paragraph. This is much shorter than the first paragraph.
Notice how the two paragraphs are divided into the columns as if they were part of one, long text.
Notice also how the margins of the p elements make the column layout look a bit weird.
You can change that by changing the margins for the p element.
column-width
Instead of setting an explicit column count you can set a column width instead. The browser will then create as many columns of that width which can fit into the element. Here is an example:
p.columnWidth {
column-width: 150px;
}
This example divides the content of all p elements with the CSS class columnWidth into 150
pixel wide columns. The number of columns will depend on the width of the p elements.
Again, you will have to use the -webkit- and -moz- prefixes to get it to work in
Firefox, Chrome and Safari:
p.columnWidth {
column-width: 150px;
-moz-column-width: 150px;
-webkit-column-width: 150px;
}
Here is how a p element looks with these styles applied:
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
Combining column-count and column-width
If you set both column-count and column-width for an HTML element, then column-width
changes meaning to "minimum column width", and column-count changes meaning to "maximum column count".
Let me explain this rule via an example.
If you set a column-width of 200px and a column-count of 3, then the browser
will create columns with a minimum width of 200 pixels until a maximum of 3 columns. Once there are 3 columns,
the browser will just expand the 3 columns to fit the space available.
column-gap
The column-gap CSS property enables you to specify the gap between columns. Here is an example:
p.columnGap {
column-count: 2;
column-gap : 3em;
-moz-column-gap : 3em;
-webkit-column-gap : 3em;
}
This example sets the column gap to 3em which is 3 times the default column gap. Here
are two columns with different gaps, so you can see how column-gap works:
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
Notice how the gap is bigger between the 2 columns in the second example. This example uses a column gap
of 3em instead of the standard of 1em.
column-rule
The column-rule CSS property enables you to draw rulers (borders) between columns. The
column-rule CSS property takes the same values as the border
CSS property. Here is an example:
p.columnRule {
column-count: 2;
column-rule : 1px solid #cccccc;
-moz-column-rule : 1px solid #cccccc;
-webkit-column-rule : 1px solid #cccccc;
}
Here is how the column-rule example looks when applied to a p element:
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
Notice there is a border between the columns.
Like with the border property you can also use the column-rule-width, column-rule-style
and column-rule-color CSS properties in case you want to set these parameters individually, instead
of setting them all via the column-rule CSS property. Remember to use the browser prefixes!
column-span
The column-span CSS property can be used to allow an element to span across multiple columns, just like with
the colspan attributes in HTML tables. This can be desirable for e.g. h2 elements or
img elements. At the time of writing the column-span CSS property worked in Internet Explorer (11),
Chrome and Safari, but not in Firefox (31).
The column-span CSS property can take one of two values:
1all
The value 1 means that the element spans one column. The value all means that the
element spans across all columns.
Here is a column-span example:
<div style="column-count: 4; -moz-column-count: 4; -webkit-column-count: 4;">
<h2 style="column-span:all; -moz-column-span: all; -webkit-column-span: all;">
This is a long headline which spans across multiple columns
</h2>
<p>
This is a long, long, text.
This is a long, long, text.
This is a long, long, text.
This is a long, long, text.
This is a long, long, text.
</p>
</div>
Here is how this example looks in the browser (with a gray border added):
This is a long headline which spans across multiple columns
This is a long, long, text. This is a long, long, text. This is a long, long, text. This is a long, long, text. This is a long, long, text.
Breaking Elements Into Multiple Columns
Sometimes an element, like a ul element (list), or headline might be broken into multiple columns.
For instance, if a longer list is located at the bottom of a column, the browser might attempt to display part
of the list in the first column, and part of the list in the next column.
You can tell the browser if it is allowed to break an element, and how using these three CSS properties:
break-insidebreak-beforebreak-after
break-inside
The break-inside CSS property tells the browser whether it is allowed to break an element into
multiple columns. The break-inside CSS property can accept the following values:
autoavoid
The value auto allows the browser to decide if an element should be broken into multiple columns.
The value avoid tells the browser not to break an element into multiple columns.
break-before + break-after
The break-after CSS property specifies whether the browser is allowed to break before or after the
element. These two CSS properties take one of these values:
autoavoidcolumn
The value auto allows the browser to decide where to break the element.
The value avoid tells the browser not to break immediately before or after the element (depending on whether
you set break-before or break-after to avoid).
The value column forces a break immediately before or after the element (depending on whether you set
break-before or break-after to column).
| Tweet | |
Jakob Jenkov | |
