CSS Multi-Column Layout Model

With the help of CSS, we can divide an element to multiple columns, to distribute contents among them. The properties used to do this job are:

CSS columns - defines column-width and column-count at once
CSS column-width - defines same width to all columns of an element
CSS column-count - divides an element to specified number of columns
CSS column-rule - defines width, style, and color of column rule, at once
CSS column-rule-width - defines the width of rule created between columns
CSS column-rule-style - defines the style of rule created between columns
CSS column-rule-color - defines the color of rules created between columns
CSS column-span - defines the whether an element should span across all columns or not
CSS column-fill - fills each columns with equally distributed contents or not

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin: 20px 0; padding: 6px;
         column-rule: 12px solid purple;
         column-count: 3; column-fill: balance;}
   </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!

CSS Online Test

« Previous Tutorial Next Tutorial »