CSS column-fill

The CSS column-fill property is used to fill each columns with equal (balanced) contents or not. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-bottom: 20px; column-count: 3; height: 100px;}
      div.a{column-fill: auto;}
      div.b{column-fill: balance;}
   </style>
</head>
<body>
   
   <h2>column-fill: auto</h2>
   <div class="a">
      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
   </div>
   
   <h2>column-fill: balance</h2>
   <div class="b">
      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
   </div>
   
</body>
</html>

Output

column-fill: auto

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

column-fill: balance

CSS column-fill Syntax

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

column-fill: x;

The value of x should be any of the following:

balance - Used to fill columns with same amount of content.
auto - Used to fill columns with content until it reaches the specified height.
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 »