Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS | Multiple Columns

Improve Article
Save Article
Like Article
author
ManasChhabra2
scholar
1626 published articles
Improve Article
Save Article
Like Article

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: 
multiple column in css
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: 
column gap
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:  
column rule style
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: 
image column
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: 
column rule
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: 
image
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: 
image
 

My Personal Notes
arrow_drop_up
Last Updated :
14 Oct, 2020
Like Article

Save Article

Similar Reads
1.
How to sort an array on multiple columns using JavaScript ?
2.
How to identify unused CSS definitions from multiple CSS files in a project ?
3.
CSS | grid-template-columns Property
4.
How to align flexbox columns left and right using CSS ?
5.
How to divide text into two columns layout using CSS ?
6.
How to align text in CSS where both columns are straight?
7.
Tailwind CSS Grid Template Columns
8.
Tailwind CSS Grid Auto Columns
9.
How to specify the optimal width for the columns in CSS ?
10.
What are CSS columns and how to fill it ?
Related Tutorials
1.
Onsen UI
2.
React Material UI
3.
NuxtJS
4.
D3.js
5.
Spectre CSS
Previous
CSS | Colors
Next

CSS | Attribute Selector
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
ManasChhabra2
ManasChhabra2
Vote for difficulty





Improved By :
Article Tags :
Practice Tags :
Report Issue 
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox