How to fill columns with CSS

To fill columns, use the column-fill property. You can try to run the following code to implement the column-fill property, with balance form:

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            column-count: 4;
            column-fill: balance;
         }
      </style>
   </head>
   <body>
      <div class = "demo">
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text.
      </div>
   </body>
</html>
Updated on: 2026-03-11T22:50:41+05:30

120 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements