CSS columns

The CSS columns property is used to define the minimum width for each column along with the maximum number of columns to divide an element with. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin: 20px 0;}
      div.a{columns: 120px 3;}
      div.b{columns: 120px 5;}
      div.c{columns: 200px 4;}
   </style>
</head>
<body>
   
   <h2>columns: 120px 3</h2>
   <div class="a">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas eius
      aut maxime nemo suscipit dolorem non, dolores, ipsum rerum ab placeat rem
      a ut libero ea minus ipsam cum dicta quod modi! Repellendus ad adipisci
      odio modi aspernatur obcaecati libero beatae. Ea magni eius illo ex!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
   <h2>columns: 120px 5</h2>
   <div class="b">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas eius
      aut maxime nemo suscipit dolorem non, dolores, ipsum rerum ab placeat rem
      a ut libero ea minus ipsam cum dicta quod modi! Repellendus ad adipisci
      odio modi aspernatur obcaecati libero beatae. Ea magni eius illo ex!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
   <h2>columns: 200px 4</h2>
   <div class="c">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas eius
      aut maxime nemo suscipit dolorem non, dolores, ipsum rerum ab placeat rem
      a ut libero ea minus ipsam cum dicta quod modi! Repellendus ad adipisci
      odio modi aspernatur obcaecati libero beatae. Ea magni eius illo ex!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
</body>
</html>

Output

columns: 120px 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas eius aut maxime nemo suscipit dolorem non, dolores, ipsum rerum ab placeat rem a ut libero ea minus ipsam cum dicta quod modi! Repellendus ad adipisci odio modi aspernatur obcaecati libero beatae. Ea magni eius illo ex! Consectetur libero autem, laudantium tenetur itaque non deleniti facere magni, repellat vel quis ratione!

columns: 120px 5

columns: 200px 4

CSS columns Syntax

The syntax of columns property in CSS, is:

columns: column-width column-count;

Therefore the columns property can also be used/called as shorthand for following CSS properties:

column-width - used to define same width to all columns of an element
column-count - used to divide an element to specified number of columns

The other three keywords that can also be used to define the columns property are auto, initial, and inherit. The auto is used to allow browser to automatically set both minimum width and maximum number of columns, to an element. Whereas the initial is used to use the default value and inherit is used to use the value inherited by the parent element.

CSS Online Test

« Previous Tutorial Next Tutorial »