Mastering CSS Columns Enhance Readability & Design

Introduction

The columns property in CSS is a handy shorthand that lets you set the number of columns and their widths for an element’s content. It’s great for creating multi-column layouts that enhance readability and aesthetics. This property simplifies managing column widths and counts, making it easier to organize large amounts of text into newspaper-style layouts.

Specification

The columns property is defined in the CSS Multi-column Layout Module Level 1. This module specifies how multi-column layouts should be handled in web browsers, ensuring consistency across different platforms. The columns property combines the functionalities of the column-width and column-count properties, allowing you to define both the width and number of columns in a single declaration.

Syntax

The columns property in CSS allows you to define the number of columns and their widths using a straightforward syntax. The syntax is as follows:

columns: column-width column-count | auto | initial | inherit;

Here’s a breakdown of the syntax components:

• column-width: Sets the ideal width of each column. It can be defined using a length value (like px, em, or %) or the keyword auto.
• column-count: Sets the ideal number of columns. It can be defined using an integer value or the keyword auto. If both column-width and column-count are provided, and neither is auto, the column-count value indicates the maximum number of columns.

Examples

Example Values

/* Column width */
columns: 18em;

/* Column count */
columns: auto;
columns: 2;

/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: revert;
columns: revert-layer;
columns: unset;

Values

The columns property accepts a combination of values that determine the width and number of columns. Here are the key values you can use:

• <'column-width'>: Sets the ideal width of each column. Can be specified as a length (e.g., px, em, %) or the keyword auto.
• <'column-count'>: Sets the ideal number of columns. Can be specified as an integer or the keyword auto.

Example Values

/* Ideal column width */
columns: 18em;

/* Ideal column count */
columns: auto;
columns: 2;

/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: revert;
columns: revert-layer;
columns: unset;

Detailed Explanation

• auto: Sets the column width and count to their default values, letting the browser decide the best layout.
• integer: Specifies the exact number of columns.
• length: Specifies the width of each column using units like px, em, or %.
• initial: Resets the property to its default initial value.
• inherit: Inherits the column width and count values from the parent element.
• revert: Reverts the property to the user-agent stylesheet’s default value.
• revert-layer: Reverts the property to the value specified in the previous cascade layer.
• unset: Resets the property to its natural value, behaving like inherit if the property is inherited or like initial if it is not.

Constituent Properties

The columns property is a shorthand for two key properties: column-width and column-count.

1. column-width:

   • Description: Specifies the ideal width of each column. The actual width may vary to fit the available space.
   • Values:
     • auto: The browser decides the optimal width.
     • <length>: Specifies the width using units like px, em, or %.
   • Example:

     column-width: 18em;

2. column-count:

   • Description: Specifies the ideal number of columns into which the element’s content should be divided.
   • Values:
     • auto: The browser decides the optimal number of columns.
     • <integer>: Specifies the exact number of columns.
   • Example:

     column-count: 3;

Using the columns shorthand property, you can set both the column-width and column-count in a single declaration, making it easier to manage the layout of your content. For example:

columns: 2 auto;

This shorthand sets the element to have 2 columns, with each column having an ideal width of auto.

Formal Definition

The columns property in CSS is formally defined to combine the functionalities of the column-width and column-count properties into a single, convenient shorthand. This property allows web developers to specify both the width and number of columns in an element’s content layout.

• Initial Value:
  • column-width: auto
  • column-count: auto
• Applies To: Block containers, except table wrapper boxes.
• Inherited: No
• Computed Value:
  • column-width: The absolute length, zero or larger.
  • column-count: As specified.
• Animation Type:
  • column-width: A length (values of the <length> CSS data type are interpolated as real, floating-point numbers).
  • column-count: An integer (values of the <integer> CSS data type are interpolated via integer discrete steps, calculated as if they were real, floating-point numbers, and the discrete value is obtained using the floor function).

Formal Syntax

The formal syntax for the columns property is as follows:

columns = [<'column-width'> || <'column-count'>]

<column-width> = auto | <length [0,∞]> | min-content | max-content | fit-content( <length-percentage> )

<column-count> = auto | <integer [1,∞]>

<length-percentage> = <length> | <percentage>

Explanation of Syntax Components

• <'column-width'>:
  • auto: The browser decides the optimal width.
  • <length [0,∞]>: Specifies the width using units like px, em, or %.
  • min-content and max-content: Specifies the minimum and maximum content widths.
  • fit-content( <length-percentage> ): Specifies the width based on a combination of length and percentage values.
• <'column-count'>:
  • auto: The browser decides the optimal number of columns.
  • <integer [1,∞]>: Specifies the exact number of columns.
• <length-percentage>:
  • <length>: Specifies the width using units like px, em, or %.
  • <percentage>: Specifies the width as a percentage of the containing element.

Examples

Example 1: Setting Three Equal Columns

In this example, we’ll create a layout with three equal columns. The columns property will be set to 3 auto, meaning the content will be divided into three columns, and the browser will determine the optimal width for each column.

HTML

<p class="content-box">
  This is a bunch of text split into three columns using the CSS `columns`
  property. The text is equally distributed over the columns.
</p>

CSS

.content-box {
  columns: 3 auto;
}

Example 2: Using Fixed Width Columns

In this example, we’ll create a layout with columns of a fixed width. The columns property will be set to 200px, meaning each column will have a width of 200 pixels.

HTML

<div class="content-box">
  <p>
    Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death,
    Gauguin is now recognized for his experimental use of color and Synthetist style that were
    distinct from Impressionism. Toward the end of his life, he spent ten years in French
    Polynesia. The paintings from this time depict people or landscapes from that region.
  </p>
</div>

CSS

.content-box {
  columns: 200px;
}

Example 3: Combining Column Width and Count

In this example, we’ll create a layout with both a specified column width and count. The columns property will be set to 2 auto 150px, meaning the content will be divided into two columns, each with an ideal width of 150 pixels.

HTML

<div class="content-box">
  <p>
    Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death,
    Gauguin is now recognized for his experimental use of color and Synthetist style that were
    distinct from Impressionism. Toward the end of his life, he spent ten years in French
    Polynesia. The paintings from this time depict people or landscapes from that region.
  </p>
</div>

CSS

.content-box {
  columns: 2 auto 150px;
}

Example 4: Using the auto Keyword

In this example, we’ll let the browser determine the optimal number of columns and their widths. The columns property will be set to auto auto, meaning the browser will decide the best layout.

HTML

<div class="content-box">
  <p>
    Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death,
    Gauguin is now recognized for his experimental use of color and Synthetist style that were
    distinct from Impressionism. Toward the end of his life, he spent ten years in French
    Polynesia. The paintings from this time depict people or landscapes from that region.
  </p>
</div>

CSS

.content-box {
  columns: auto auto;
}

Browser Compatibility

The columns property is widely supported across modern browsers, ensuring that your multi-column layouts will be rendered correctly on most devices. Here is a summary of the browser support for the columns property:

• Chrome: Version 50.0 and above (released in April 2016)
• Firefox: Version 52.0 and above (released in March 2017)
• IE/Edge: Version 10.0 and above (released in September 2012)
• Opera: Version 37.0 and above (released in May 2016)
• Safari: Version 9.0 and above (released in September 2015)

See Also

For further exploration of CSS properties related to multi-column layouts, you may find the following resources helpful:

• widows
• orphans
• Paged media
• Multiple-column Layout

These resources will give you more insights and techniques to enhance the visual appeal and readability of your web pages.