What are CSS columns and how to fill it ?

Last Updated : 13 Apr, 2021

CSS columns: We can break the content of an element into columns, called CSS columns. We can fill it using the column-fill property. The column-fill property control how the content of the element will break into columns. It takes the values auto, balance, inherit, and initial.

Syntax:

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

This example shows how we can break an element into columns:

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        div { 
            column-count: 3; 
        } 
          
        .gfg1 { 
            column-fill: auto; 
        } 
          
        .gfg2 { 
            column-fill: balance; 
        } 
          
        .gfg3 { 
            column-fill: initial; 
        } 
          
        .gfg4 { 
            column-fill: inherit; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>What are css columns and how to fill it?</h1> 
  
    <h2>column-fill: auto</h2> 
    <div class="gfg1"> 
        GeeksforGeeks is my favorite site  
        where I can gain a lot of knowledge  
        and can also share my knowledge what  
        I have gained while learning. We can  
        add more paragraphs for content.  
        This is just an example to tell you  
        about column in css. 
        GeeksforGeeks is my favorite site  
        where I can gain a lot of knowledge  
        and can also share my knowledge what  
        I have gained while learning. We can  
        add more paragraphs for content.  
        This is just an example to tell you  
        about column in css. 
    </div> 
  
    <h2>column-fill: balance (default)</h2> 
    <div class="gfg2"> 
        GeeksforGeeks is my favorite site  
        where I can gain a lot of knowledge  
        and can also share my knowledge what  
        I have gained while learning. We can  
        add more paragraphs for content.  
        This is just an example to tell you  
        about column in css. 
        GeeksforGeeks is my favorite site  
        where I can gain a lot of knowledge  
        and can also share my knowledge what  
        I have gained while learning. We can  
        add more paragraphs for content.  
        This is just an example to tell you  
        about column in css. 
    </div> 
  
    <h2>column-fill: initial</h2> 
    <div class="gfg13"> 
        GeeksforGeeks is my favorite site  
        where I can gain a lot of knowledge  
        and can also share my knowledge what  
        I have gained while learning. We can  
        add more paragraphs for content.  
        This is just an example to tell you  
        about column in css. 
        GeeksforGeeks is my favorite site  
        where I can gain a lot of knowledge  
        and can also share my knowledge what  
        I have gained while learning. We can  
        add more paragraphs for content.  
        This is just an example to tell you  
        about column in css. 
    </div> 
  
    <h2>column-fill: inherit</h2> 
    <div class="gfg4"> 
        GeeksforGeeks is my favorite site  
        where I can gain a lot of knowledge  
        and can also share my knowledge what  
        I have gained while learning. We can  
        add more paragraphs for content.  
        This is just an example to tell you  
        about column in css. 
        GeeksforGeeks is my favorite site  
        where I can gain a lot of knowledge  
        and can also share my knowledge what  
        I have gained while learning. We can  
        add more paragraphs for content.  
        This is just an example to tell you  
        about column in css. 
    </div> 
</body> 
  
</html>