CSS | Multiple Columns

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Multiple column content</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>                    

chevron_right


Output:
multiple column in css



The columns-gap property: This property is used to define the gap between columns.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:
column gap

The column-rule-style property: This property is used to specify the style between the columns.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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;
            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>                    

chevron_right


Output:
column rule style

The column-rule-width property: This property is used to specify the width of rule between columns.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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;
            -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>                    

chevron_right


Output:
image column

The column-rule-color property: This property is used to defines the color between the columns.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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;
            -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>                    

chevron_right


Output:
column rule

The column-rule property: This property is used to define the style, width, color of the rule between columns.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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;
            -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>                    

chevron_right


Output:

The column-span property: This property is used to define an element should span across how many columns.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Column gap</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>                    

chevron_right


Output:
image

The column-width property: This property is used to specify the width of the each column.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Column gap</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>                    

chevron_right


Output:
image



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.