CSS - Multiple Column Layout

CSS provide several properties to design multiple column layout for webpages. The multiple column layout is used generally for layout designing in newspapers, online blogs, books, etc. In this chapter we will discuss how to create and style multiple column layout using HTML and CSS.

Table of Contents

CSS Create Multiple ColumnsSetting Column WidthSpanning Columns in Multiple Column LayoutSpecify Gap Between ColumnsCSS Column RulesMultiple Column Layout Related properties

CSS Create Multiple Columns

In CSS, we can use thecolumn-countproperty to specify number of columns for displaying texts inside any element. Let us see an examples:

Example

Setting Column Width

To make column layout, it is not necessary to use column-count property, we can also usecolumn-widthproperty. Number of columns will be determined automatically based on width of column specified. Let see an example.

Example

CSS Specify the Gap Between Columns

To specify gap between columns, we can usecolumn-gapproperty. Let see an example.

Example

CSS Column Rules

In CSS multiple column layout, we can add rules (or lines) between columns using column rule properties. Following are column-rule properties in CSS:

• column-rule-style:Defines the style of the line between columns (e.g., solid, dashed).
• column-rule-color:Sets the color of the line between columns.
• column-rule-width:Specifies the width (thickness) of the line between columns.
• column-rule:A shorthand property to set the style, color, and width of the line between columns.

Let see an example for these properties.

Example

CSS Spanning Columns in Multiple Column Layout

If you want to add a heading, or any other elements that spans across all the columns in layout, You can usecolumn-spanproperty. The value of this property following:

• column-span: all -The heading will span over every other column in layout.
• column-span: none -The heading will be placed as a seperate column.

Multiple Column Layout Related properties

Following table shows all the properties that are supported in CSS for multiple column layout.

PropertyDescriptionExamplecolumn-countSpecifies the number of columns an element is divided into when displayed in a multi-column layout.Try Itcolumn-fillSpecifies how to fill columns.Try Itcolumn-gapSets the size of the gap between an element’s columns.Try Itcolumn-widthSets the column width in a multi-column layout.Try Itcolumn-ruleShorthand property that sets the color, style, and width of the line drawn between columns in a multi-column layout.Try Itcolumn-rule-colorSets the color of the line drawn between columns in a multi-column layout.Try Itcolumn-rule-styleSets the style of the line drawn between columns in a multi-column layout.Try Itcolumn-rule-widthSets the width of the line drawn between columns in a multi-column layout.Try Itcolumn-spanDefines whether an element should span across one column or all columns, in a multi-column layout.Try It