Multi-column Features
CSS Multi-column Layout Module
Foreword: In this part of the series, I talk about CSS colons.
By: Chrysanthus Date Published: 28 Dec 2015
Introduction
On the Web, tables have also been used to describe multi-column layouts. The main advantage of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.
Pre-Knowledge
At the bottom of this page, you have links to the different series you should have read before coming here, in order to understand this series better.
Overview
Column Width
In the following example, the body element is set to have columns of at least ‘12em’ wide. The exact number of columns will depend on the available space.
body { column-width: 12em }
Number of Columns
In the following case, the number of columns is fixed and the column widths will vary depending on the available total width:
body { column-count: 2 }
The shorthand ‘columns’ property
The shorthand ‘columns’ property can be used to set either, or both, properties in one declaration. In the following example, both the number of columns and width of columns are set, respectively:
body { columns: 2 12em }
However, setting both the width and number of columns rarely makes sense – see later.
Gaps and Vertical Rules
You also have the column-gap and column-rule properties. The following example illustrates this:
body
{
column-gap: 1em;
column-rule: thin solid black;
}
Column gaps are similar to padding areas. In the middle of the gap in this example, there will be a rule, which is described by the ‘column-rule’ property. The values of the ‘column-rule’ property are similar to those of the CSS border properties. Like ‘border’, ‘column-rule’ is a shorthand property.
In the following example, columns are set to be balanced, i.e., to have approximately the same length (of content). Also, h2 elements are set to span across all columns, separating the columns into top and bottom column portions.
div { column-fill: balance }
h2 { column-span: all }
break-before, break-inside and break-after Properties
In the following example, h1 elements will always have a column break before them, but the formatter will try to avoid column breaks inside and after the element.
h1
{
break-before: column;
break-inside: avoid-column;
break-after: avoid-column;
}
I will say more about these breaks later.
Note: If all column properties have their initial (default) value, the layout of the element will be identical to a multi-column layout with only one column.
The multi-column model
The columns are in a multi-column single element. The columns are column boxes and have no concept of padding, margin or borders. An element can be floated within a column box, and it would have text above it, below, and on one of its sides. At the moment, all columns have the same width. Nested multi-column elements are allowed, but there may be browser-specific limits.
Explanation of some Properties for the Multi-Column Element
The Number and Width of Columns
The number of columns is given by the column-count property, and the column width is given by the column-width property.
When coding column width, the following property table should be taken into consideration:
Name: column-width
Value: <length> | auto
Initial: auto
Applies to: non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: the absolute length, zero or larger
The possible property values are:
auto: means that the column width will be determined by other properties (e.g., ‘column-count’, if it has a non-auto value).
<length>: describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.
The ‘column-count’ Property
When coding column count, the following property table should be taken into consideration:
Name: column-count
Value: <integer> | auto
Initial: auto
Applies to: non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value
The possible property values are:
auto: means that the number of columns will be determined by other properties (e.g., ‘column-width’, if it has a non-auto value).
<integer>: describes the optimal number of columns into which the content of the element will be flowed.
The column-rule-style Property
The value of this property is the value of the border style property. Possible values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
This property sets the gap between two columns. Any column rule takes a fraction of the gap.
The ‘column-rule’ Property
This property is a shorthand for setting the ‘column-rule-width’, ‘column-rule-style’, and ‘column-rule-color’ properties at the same place in the CSS rule. When coding column rule, the following property table should be taken into consideration:
Name: column-rule
Value: <‘column-rule-width’> || <‘column-rule-style’> || [ <‘column-rule-color’> | transparent ]
Initial: see individual properties
Applies to: multicol elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties
|| means OR and that the value components can be placed in any order (one or more can be omitted).
Spanning Columns
The ‘column-span’ property makes it possible for an element to span across several columns. The spanning cannot only be imposed at the top as indicated above with the h2
element. It can be imposed in the middle of the columns, across the columns. This would separate the top halves of the columns from the bottom halves (with an h2 element or an image).
Assume that you have three columns in a multi-column element. You can span the columns to split the three columns in halves, i.e. three halves above and three halves below. Content will flow in all the three halves above, before continuing to flow in the three halves below. When spanning columns, the following property table should be taken into consideration:
Name: column-span
Value: none | all
Initial: none
Applies to: block-level elements, except floating and absolutely positioned elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
This property describes how many columns an element spans across. Values are:
none: The element (e.g. h2) does not span multiple columns.
all: The element (e.g. h2) spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears.
An element that spans more than one column is called a spanning element.
There are two strategies for filling columns: columns can either be balanced, or not. If columns are balanced, UAs (browsers) should minimize the variation in column length (content). Otherwise, columns are filled sequentially and some columns may end up partially filled, or with no content at all. In any case, the user agent should try to honor the ‘widows’ and ‘orphans’ properties. You fill columns with the column fill property. Filling columns means balancing the columns. When filling columns, the following property table should be taken into consideration:
Name: column-fill
Value: auto | balance
Initial: balance
Applies to: multicol elements
Inherited: no
Percentages: N/A
Media: see below
Computed value: as specified
The values are:
balance: balance content equally between columns, if possible.
auto: fills columns sequentially.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course