How to arrange text in multi columns using CSS3 ?
Last Updated :
20 Jun, 2024
In many websites, content is often displayed in parallel stacks to present more information in a compact space, similar to how newspapers and books are formatted. This pattern helps display large amounts of content in a small area, making it easier to read. In this article, we will learn how to arrange content in multiple columns using HTML and CSS.
.jpg)
Understanding Multi-Column Layouts
Multi-column layouts help present content in a visually appealing and organized manner, allowing users to read more comfortably. This technique is particularly useful for displaying large blocks of text in a small area.
CSS Properties for Multi-Column Layouts
To create multi-column layouts, CSS provides several properties:
- 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.
Approaches to Create Multi-Column Layouts
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:
Creating multi-column layouts in CSS is straightforward using the column-count property or generic CSS properties like float and Flexbox. These techniques help present large blocks of content in a readable and organized manner. For more advanced multi-column layouts, refer to our CSS Multiple Columns.
Similar Reads
How to Divide Text Into Two Columns Layout using CSS ? Dividing text into two-column layouts using CSS allows for a more structured and visually appealing content presentation. It helps break long text into manageable sections, improving readability and user experience. By using CSS techniques, you can easily create balanced and organized multi-column d
4 min read
How to Align Right in a Table Cell using CSS ? Aligning right in a table cell means positioning the content of the cell to the right side. In CSS, this can be achieved by applying the text-align property to the table cell or using the td selector.Align right in a table cell Using text-align propertyTo align the contents of a table cell to right,
2 min read
How to align text in CSS where both columns are straight? Introduction: To align text in CSS there are lots of options available. Basically columns are straight always in CSS or in HTML, but here the columns are straight means that the gap between columns and the number of lines in each column should be equal. Approach: In CSS each column act as a box, so
2 min read
How to align columns in a row on text end using Bootstrap 5 ? In this article, we will see how to align columns in a row on the text end using Bootstrap5. Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hove
2 min read
How to set width style and color of rule between columns in CSS ? In this article, we will learn how to specify the width, style, and color of the rule between columns. To set the width and color of the rule between columns in CSS, you can use the column-rule properties. Approach: The column-rule property is used to specify the width, style, and color of the rule
2 min read
How to specify the optimal width for the columns in CSS ? In this article, we will learn to specify the optimal width for the columns in CSS. The column-width property of CSS is used to specify the optimal width for the columns. Approach: We can specify the optimal width for the columns in CSS using the column-width property. We set a value for the column
2 min read