How to arrange text in multi columns using CSS3 ?
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
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.
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.