How to fill columns with CSS

CSSWeb DevelopmentFront End Technology

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

Live Demo

<!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>
raja
Updated on 24-Jun-2020 11:47:19

Advertisements