CSS | Multiple Columns - GeeksforGeeks

14 Oct, 2020
The multiple columns are used to create column layout in the web pages. There are many column property in CSS which are listed below: 
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
The column-count property: This property is used to count the number of column element in document that should be divided. 
Example:  
HTML
<!DOCTYPE html><html>    <head>        <title>Column-count property</title>        <style>        .geeks_content {            -webkit-column-count: 3;            -moz-column-count: 3;            column-count: 3;            padding-top:35px;            text-align:justify;        }        .gfg {            text-align:center;            font-size:40px;            font-weight:bold;            color:green;        }        .geeks {            text-align:center;        }        </style>    </head>    <body>        <div class="gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>        <div class="geeks_content">            Sudo Placement: Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course. The course focuses on            various MCQ's & Coding question likely to be            asked in the interviews & make your upcoming            placement season efficient and successful.            Placement preparation solely depends on the            company for which you are preparing. There            are basically three different categories            into which we can divide the companies visiting            campuses for placements based on their recruitment            process. Mass Recruiters, Tech Giants, Others / Start-ups            Companies belonging to the above categories have            their own recruitment process. In this course, we            will try to cover every possible detail required            to know for cracking interview of the companies            falling in each of the above categories.        </div>    </body></html>                   
Output: 
The columns-gap property: This property is used to define the gap between columns. 
Example: 
HTML
<!DOCTYPE html><html>    <head>        <title>Column gap</title>        <style>        .geeks_content {            -webkit-column-count: 3;            -moz-column-count: 3;            column-count: 3;            padding-top:35px;            text-align:justify;            -webkit-column-gap: 50px;            -moz-column-gap: 50px;            column-gap: 50px;            width:100%;        }        .gfg {            text-align:center;            font-size:40px;            font-weight:bold;            color:green;        }        .geeks {            text-align:center;        }        </style>    </head>    <body>        <div class="gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>        <div class="geeks_content">            Sudo Placement: Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course. The course focuses on            various MCQ's & Coding question likely to be            asked in the interviews & make your upcoming            placement season efficient and successful.            Placement preparation solely depends on the            company for which you are preparing. There            are basically three different categories            into which we can divide the companies visiting            campuses for placements based on their recruitment            process. Mass Recruiters, Tech Giants, Others / Start-ups            Companies belonging to the above categories have            their own recruitment process. In this course, we            will try to cover every possible detail required            to know for cracking interview of the companies            falling in each of the above categories.        </div>    </body></html>                   
Output: 
The column-rule-style property: This property is used to specify the style between the columns. 
Example: 
HTML
<!DOCTYPE html><html>    <head>        <title>Column-rule-style property</title>        <style>        .geeks_content {            -webkit-column-count: 3;            -moz-column-count: 3;            column-count: 3;            padding-top:35px;            column-rule-style:solid;            text-align:justify;                     }        .gfg {            text-align:center;            font-size:40px;            font-weight:bold;            color:green;        }        .geeks {            text-align:center;        }        </style>    </head>    <body>        <div class="gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>        <div class="geeks_content">            Sudo Placement: Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course. The course focuses on            various MCQ's & Coding question likely to be            asked in the interviews & make your upcoming            placement season efficient and successful.            Placement preparation solely depends on the            company for which you are preparing. There            are basically three different categories            into which we can divide the companies visiting            campuses for placements based on their recruitment            process. Mass Recruiters, Tech Giants, Others / Start-ups            Companies belonging to the above categories have            their own recruitment process. In this course, we            will try to cover every possible detail required            to know for cracking interview of the companies            falling in each of the above categories.        </div>    </body></html>                   
Output:  
The column-rule-width property: This property is used to specify the width of rule between columns. 
Example: 
HTML
<!DOCTYPE html><html>    <head>        <title>Column-rule-width property</title>        <style>        .geeks_content {            -webkit-column-count: 3;            -moz-column-count: 3;            column-count: 3;            padding-top:35px;            -webkit-column-gap: 40px;            -moz-column-gap: 50px;            column-gap: 50px;            -webkit-column-rule-style: solid;            -moz-column-rule-style: solid;            column-rule-style: solid;            -webkit-column-rule-width: 10px;            -moz-column-rule-width: 10px;            column-rule-width: 10px;            width:100%;            text-align:justify;        }        .gfg {            text-align:center;            font-size:40px;            font-weight:bold;            color:green;        }        .geeks {            text-align:center;        }        </style>    </head>    <body>        <div class="gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>        <div class="geeks_content">            Sudo Placement: Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course. The course focuses on            various MCQ's & Coding question likely to be            asked in the interviews & make your upcoming            placement season efficient and successful.            Placement preparation solely depends on the            company for which you are preparing. There            are basically three different categories            into which we can divide the companies visiting            campuses for placements based on their recruitment            process. Mass Recruiters, Tech Giants, Others / Start-ups            Companies belonging to the above categories have            their own recruitment process. In this course, we            will try to cover every possible detail required            to know for cracking interview of the companies            falling in each of the above categories.        </div>    </body></html>                   
Output: 
The column-rule-color property: This property is used to defines the color between the columns.
 Example: 
HTML
<!DOCTYPE html><html>    <head>        <title>Column-rule-color property</title>        <style>        .geeks_content {            -webkit-column-count: 3;            -moz-column-count: 3;            column-count: 3;            padding-top:35px;            -webkit-column-gap: 50px;            -moz-column-gap: 50px;            column-gap: 50px;            -webkit-column-rule-style: solid;            -moz-column-rule-style: solid;            column-rule-style: solid;            -webkit-column-rule-width: 10px;            -moz-column-rule-width: 10px;            column-rule-width: 10px;            width:100%;            text-align:justify;            -webkit-column-rule-color: green;            -moz-column-rule-color: green;            column-rule-color: green;        }        .gfg {            text-align:center;            font-size:40px;            font-weight:bold;            color:green;        }        .geeks {            text-align:center;        }        </style>    </head>    <body>        <div class="gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>        <div class="geeks_content">            Sudo Placement: Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course. The course focuses on            various MCQ's & Coding question likely to be            asked in the interviews & make your upcoming            placement season efficient and successful.            Placement preparation solely depends on the            company for which you are preparing. There            are basically three different categories            into which we can divide the companies visiting            campuses for placements based on their recruitment            process. Mass Recruiters, Tech Giants, Others / Start-ups            Companies belonging to the above categories have            their own recruitment process. In this course, we            will try to cover every possible detail required            to know for cracking interview of the companies            falling in each of the above categories.        </div>    </body></html>                   
Output: 
The column-rule property: This property is used to define the style, width, color of the rule between columns. 
Example:  
HTML
<!DOCTYPE html><html>    <head>        <title>Column-rule property</title>        <style>        .geeks_content {            -webkit-column-count: 3;            -moz-column-count: 3;            column-count: 3;            padding-top:35px;            -webkit-column-rule: 10px solid green;            -moz-column-rule: 10px solid green;            column-rule: 10px solid green;            width:100%;            text-align:justify;        }        .gfg {            text-align:center;            font-size:40px;            font-weight:bold;            color:green;        }        .geeks {            text-align:center;        }        </style>    </head>    <body>        <div class="gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>        <div class="geeks_content">            Sudo Placement: Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course. The course focuses on            various MCQ's & Coding question likely to be            asked in the interviews & make your upcoming            placement season efficient and successful.            Placement preparation solely depends on the            company for which you are preparing. There            are basically three different categories            into which we can divide the companies visiting            campuses for placements based on their recruitment            process. Mass Recruiters, Tech Giants, Others / Start-ups            Companies belonging to the above categories have            their own recruitment process. In this course, we            will try to cover every possible detail required            to know for cracking interview of the companies            falling in each of the above categories.        </div>    </body></html>                   
Output: 
The column-span property: This property is used to define an element should span across how many columns. 
Example: 
HTML
<!DOCTYPE html><html>    <head>        <title>Column-span property</title>        <style>        .geeks_content {            -webkit-column-span: 3;            column-span: 3;            -moz-column-count: 3;            column-count: 3;            padding-top:35px;            -webkit-column-gap: 50px;            -moz-column-gap: 50px;            column-gap: 50px;            -webkit-column-rule-style: solid;            -moz-column-rule-style: solid;            column-rule-style: solid;            -webkit-column-rule-width: 10px;            -moz-column-rule-width: 10px;            column-rule-width: 10px;            width:100%;            text-align:justify;            -webkit-column-rule-color: green;            -moz-column-rule-color: green;            column-rule-color: green;        }        .gfg {            text-align:center;            font-size:40px;            font-weight:bold;            color:green;        }        .geeks {            text-align:center;        }        </style>    </head>    <body>        <div class="gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>        <div class="geeks_content">            Sudo Placement: Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course. The course focuses on            various MCQ's & Coding question likely to be            asked in the interviews & make your upcoming            placement season efficient and successful.            Placement preparation solely depends on the            company for which you are preparing. There            are basically three different categories            into which we can divide the companies visiting            campuses for placements based on their recruitment            process. Mass Recruiters, Tech Giants, Others / Start-ups            Companies belonging to the above categories have            their own recruitment process. In this course, we            will try to cover every possible detail required            to know for cracking interview of the companies            falling in each of the above categories.        </div>    </body></html>                   
Output: 
The column-width property: This property is used to specify the width of each column. 
Example: 
HTML
<!DOCTYPE html><html>    <head>        <title>Column-width property</title>        <style>        .geeks_content {            margin-top:35px;            -webkit-column-width: 250px;            -moz-column-width: 250px;            column-width: 250px;            text-align:justify;        }        .gfg {            text-align:center;            font-size:40px;            font-weight:bold;            color:green;        }        .geeks {            text-align:center;        }        </style>    </head>    <body>        <div class="gfg">GeeksforGeeks</div>        <div class = "geeks">A computer science portal for geeks</div>        <div class="geeks_content">            Sudo Placement: Prepare for the Recruitment            drive of product based companies like Microsoft,            Amazon, Adobe etc with a free online placement            preparation course. The course focuses on            various MCQ's & Coding question likely to be            asked in the interviews & make your upcoming            placement season efficient and successful.            Placement preparation solely depends on the            company for which you are preparing. There            are basically three different categories            into which we can divide the companies visiting            campuses for placements based on their recruitment            process. Mass Recruiters, Tech Giants, Others / Start-ups            Companies belonging to the above categories have            their own recruitment process. In this course, we            will try to cover every possible detail required            to know for cracking interview of the companies            falling in each of the above categories.        </div>    </body></html>                   
Output: 
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
arorakashish0911
CSS-Basics
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
Hide or show elements in HTML using display property