CSS - column-fill Property

Quiz

CSS column-fill property is responsible for balancing the contents of an element when broken into columns.

Syntax

column-fill: auto | balance | initial | inherit;

Property Values

Value	Description
auto	It results in sequential filling of columns. The content takes up the required space only. It may result in some columns remaining empty.
balance	It evenly distributes content across columns, ensuring that each column is filled as equally as possible, creating a more balanced layout.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Column Fill Property

The following examples explain the column-fill porperty with different values.

Column Fill Property with Auto Value

To let the content flow into columns naturally without forcing an even distribution such that if the content is exhausted before filling all columns, the remaining space in the columns will be left empty, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         column-count: 3;
         height: 200px;
      }

      .column-auto {
         column-fill: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-fill Property
   </h2>
   <p><strong>
      column-fill: auto
   </strong>
   </p>
   <div class="column-auto">
      TutorialsPoint is an online educational platform
      offering extensive tutorials and resources across
      diverse subjects such as programming, 
      web development, and technology. It provides 
      structured, easy-to-follow content and practical
      examples for learners of all levels. With 
      interactive coding exercises and comprehensive
      guides, TutorialsPoint aims to facilitate 
      effective self-paced learning and 
      skill development.
   </div>
</body>

</html>

Column Fill Property with Balance Value

To let the content be distributed across the number of columns defined such that each column contains the same amount of content, we use the balance value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         column-count: 3;
         height: 200px;
      }

      .column-auto {
         column-fill: balance;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-fill Property
   </h2>
   <p><strong>
      column-fill: balance
   </strong>
   </p>
   <div class="column-auto">
      TutorialsPoint is an online educational platform
      offering extensive tutorials and resources across
      diverse subjects such as programming, 
      web development, and technology. It provides 
      structured, easy-to-follow content and 
      practical examples for learners of all levels. 
      With interactive coding exercises and 
      comprehensive guides, TutorialsPoint aims to 
      facilitate effective self-paced learning and 
      skill development.
   </div>
</body>

</html>

Supported Browsers

Property
column-fill	50.0	10.0	52.0	10.0	37.0

css_reference.htm

Print Page