How to arrange text in multi columns using CSS3 ? - GeeksforGeeks

22 Sep, 2021
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 the large-size content in the 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 defines the color between the columns.
CSS column-rule: This property is used to define the style, width, 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 the generic CSS properties like float, padding, text-align & the 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 into 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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sweetyty
CSS-Properties
CSS-Questions
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to set space between the flexbox ?
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)