CSS column-span

The CSS column-span property is used to define the whether an element should span across all columns or not. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{column-count: 3;}
      p.x{column-span: all;}
   </style>
</head>
<body>
   
   <div>
      <p class="x">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
         nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
         volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
         ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
         molestie consequat
      </p>
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
         nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
         volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
         ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
         molestie consequat
      </p>
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

CSS column-span Syntax

The syntax of column-span property in CSS, is:

column-span: x;

The value of x should be any of the following:

all - Used to span an element across all columns
none - Used to span an element across only one column. This is the defaul value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »