Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS column-span

The column-span property enables an element to span across columns.

This property is used by headings that span multi-column layouts.

Example

#

An <h2> element (heading) with a column-span value of all.

Paul Gauguin, a Post-Impressionist Artist

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. His work was influential on the French avant-garde and many modern artists, such as Pablo Picasso and Henri Matisse, and he is well known for his relationship with Vincent and Theo van Gogh. Gauguin's art became popular after his death, partially from the efforts of dealer Ambroise Vollard, who organized exhibitions of his work late in his career and assisted in organizing two important posthumous exhibitions in Paris.
<div style="column-count:3">
  <h2 style="column-span: all;">
    Paul Gauguin, a Post-Impressionist Artist
  </h2>
  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.

  His work was influential on the French
  avant-garde and many modern artists, such
  as Pablo Picasso and Henri Matisse, and he
  is well known for his relationship with
  Vincent and Theo van Gogh. Gauguin's art
  became popular after his death, partially
  from the efforts of dealer Ambroise Vollard,
  who organized exhibitions of his work late in
  his career and assisted in organizing two
  important posthumous exhibitions in Paris.
</div>

Using column-span

Not all browers support column-span.

Syntax

column-span: none | all | 
             initial | inherit;

Values

#

Value Description
none Default, spans element across one column
all Spans element across all columns
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see different column-span values.

Paul Gauguin, a Post-Impressionist Artist

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. His work was influential on the French avant-garde and many modern artists, such as Pablo Picasso and Henri Matisse, and he is well known for his relationship with Vincent and Theo van Gogh. Gauguin's art became popular after his death, partially from the efforts of dealer Ambroise Vollard, who organized exhibitions of his work late in his career and assisted in organizing two important posthumous exhibitions in Paris.
<style>
  .column-span-example {
    column-span: none;
  }
</style>

<div style="column-count:3">
  <h2 class="column-span-example">
    Paul Gauguin, a Post-Impressionist Artist
  </h2>
  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.

  His work was influential on the French
  avant-garde and many modern artists, such
  as Pablo Picasso and Henri Matisse, and he
  is well known for his relationship with
  Vincent and Theo van Gogh. Gauguin's art
  became popular after his death, partially
  from the efforts of dealer Ambroise Vollard,
  who organized exhibitions of his work late in
  his career and assisted in organizing two
  important posthumous exhibitions in Paris.
</div>

Browser support

This table shows when column-span support started for each browser.

Chrome
50.0 Apr 2016
Firefox
Not supported
IE/Edge
10.0 Sep 2012
Opera
37.0 May 2016
Safari
9.0 Sep 2015

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides