How to arrange text in multiple columns in CSS3
How to Arrange Text in Multiple Columns with CSS3
To arrange text in multiple columns, we use the CSS3 ‘column-count’ property. The column-count property is used to divide the content of an HTML element into a specified number of columns. Here, we will use two different examples to demonstrate the application of the CSS column-count property in two and three columns.
Syntax
column-count: n;
Here, ‘n’ is a positive integer representing the number of columns we want to arrange the text into.
Example 1
In this example, we will arrange the contents of a ‘p’ tag into three columns using the CSS3 ‘column-count’ property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to arrange text in multi columns using CSS3?</title>
<style>
.para {
column-count: 3;
}
</style>
</head>
<body>
<h3>How to arrange text in multi columns using CSS3?</h3>
<p class="para">Lorem ipsum Dolor sits and feels comfortable. The architect's ratio is always conspicuous at first sight, under the temporal laudatory pressure, but in fact he sits possi-
bly so that his face repels dolor, and his body replies.</p>
</body>
</html>
Example 2
In this example, we’ll arrange the contents of a page tag into two columns using the CSS3 column-count property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to arrange text in multi columns using CSS3?</title>
<style>
.para {
column-count: 2;
}
</style>
</head>
<body>
<h3>How to arrange text in multi columns using CSS3?</h3>
<p class="para">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. repudiandae.</span>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</body>
</html>
Summary
In this article, we learned what the “column-count” property is and how to use it to arrange text into multiple columns in CSS3. In the first example, we set the “column-count” property to 3 to arrange the text into three columns; in the second example, we set the “column-count” property to 2 to arrange the text into three columns.