CSS column-width

The CSS column-width property is used to define same width to all columns of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{column-width: 80px;}
   </style>
</head>
<body>
   
   <div>
      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

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!

Note - If the defined column width becomes greater than the current browser screen width, then the element gets wrapped into a single column.

CSS column-width Syntax

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

column-width: x;

The value of x should be any of the following:

Length - Used to define custom column width like 140px, 8cm etc.
auto - Used to allow browser to determine the column width. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS column-width Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin: 20px 0;}
      div.a{column-width: auto;}
      div.b{column-width: 180px;}
      div.c{column-width: 8cm;}
   </style>
</head>
<body>
   
   <h2>column-width: auto</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>column-width: 180px</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>column-width: 8cm</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

column-width: auto

column-width: 180px

column-width: 8cm

CSS Online Test

« Previous Tutorial Next Tutorial »