How to arrange text in multi columns using CSS3 ?

Last Updated : 19 Jun, 2023

Sometimes we have seen in many websites that the content is parallel stacked to each other in order to display more content to read. This pattern is also followed in the newspapers or in the books to get read the content at a time. This kind of pattern generally helps to display large-size content in a small area that will require minimum effort. In this article, we will learn how to arrange the content in multiple lines in a parallel stacked manner using HTML & CSS. The below image illustrates the concept.

Here, you can see we are presenting the content in four different rows to make it more comfortable to look at. To arrange text in multiple columns using only CSS is a pretty easy task to do. There are CSS properties available, by using those properties, we can create as many columns as we want, we can set the gap between the columns as well. All the required properties are described below:

CSS column-count: This property is used to count the number of column elements in a document that should be divided.
CSS column-gap: This property is used to define the gap between columns.
CSS column-rule-style: This property is used to specify the style between the columns.
CSS column-rule-width: This property is used to specify the width of the rule between columns.
CSS column-rule-color: This property is used to define the color between the columns.
CSS column-rule: This property is used to define the style, width, and color of the rule between columns.
CSS column-span: This property is used to define an element that should span across how many columns.
CSS column-width: This property is used to specify the width of each column.

Please refer to the CSS | Multiple Columns article for creating the multiple and different style column texts.

Approach: We will use two different methods to accomplish this task:

By using the column-count property that defines the number of columns an element can be divided into.
By using generic CSS properties like float, padding, text-align & width property.

We will use the above two approaches & understand them through the examples.

Example 1: In this example, we will use the column-count property and set the property to 4 so the number of columns becomes 4.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        .geeks_content {
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            padding-top: 35px;
            text-align: justify;
        }
 
        .gfg {
            text-align: center;
            font-size: 40px;
            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:

Example 2: In this example, we will use the generic CSS properties to arrange the multiple line column in a similar fashion to achieve the same output.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>Multi-line text arrangement</title>
 
    <style>
        * {
            box-sizing: border-box;
        }
 
        /* CSS property for header section */
        .header {
            background-color: green;
            padding: 15px;
            text-align: center;
        }
 
        /* CSS property for content section */
        .columnA,
        .columnB,
        .columnC {
            float: left;
            width: 31%;
            padding: 15px;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <div class="header">
        <h2 style="color: white; font-size: 200%">
            GeeksforGeeks
        </h2>
    </div>
 
    <div class="row">
        <div class="columnA">
            <h2>Column A</h2>
 
            <p>
                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.
            </p>
 
        </div>
 
        <div class="columnB">
            <h2>Column B</h2>
 
            <p>
                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.
            </p>
 
        </div>
 
        <div class="columnC">
            <h2>Column C</h2>
 
            <p>
                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.
            </p>
 
        </div>
    </div>
</body>
   
</html>

Output:

Suggest improvement

Difference between auto, 0, and no z-index in CSS

How to apply hover effect over button using SASS ?

Share your thoughts in the comments

How to arrange text in multi columns using CSS3 ?

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?