CSS Multi-column
The CSS multi-column layout is a CSS module that supports the multi-column layout. The multi-column layout is used to layout the content into a set of column boxes and also specifies that how content should flow from column to column, the margin between columns, gap sizes between columns, and column rules along with their appearance.
CSS Multi-column Properties
| S.No. |
Property |
Description |
| 1. |
column-count |
The column-count property specifies the number of columns an element should be divided. |
| 2. |
column-fill |
The column-fill property specifies how to fill the column. |
| 3. |
column-gap |
The column-gap property specifies the gap between the multip0le columns of the element. |
| 4. |
column-rule |
The column-rule property is a shorthand property for the column-rule-*. |
| 5. |
column-rule-color |
The column-rule-color property specifies the color of the rule between the columns. |
| 6. |
column-rule-style |
The column-rule-style property specifies the style of the rule between the columns. |
| 7. |
column-rule-width |
The column-rule-width property specifies the width of the rule between columns. |
| 8. |
column-span |
The column-span property specifies the number of columns an element should span across. |
| 9. |
column-width |
The column-width property specifies the optimal widths for the columns. |
| 10. |
columns |
The columns is a shorthand property that is used to specify the column-width and column-count. |
How to create Multi-columns in CSS
To create the CSS multi-column layout we have to specify the column-count property which specifies the number of columns the element should be divided.
Example: Creating multi-column layout using CSS
In the given example, we have created a paragraph using <p> tag and then using the column-count property we have divided this paragraph into three columns just like the newspaper columns.
<!DOCTYPE html>
<html>
<head>
<title>CSS Multi Column Layout</title>
<style>
.multi_col{
column-count: 3;
}
</style>
</head>
<body>
<p class="multi_col">
The CSS multi-column layout is a CSS module that supports the multi-column layout. The multi-column layout is used to layout the content into a set of column boxes and also specifies that how content should flow from column to column, margin between columns, gap sizes between columns, and column rules along with their appearance.
To create the CSS multi-column layout we have to specify the column-count property which specify the number of columns the element should be divided.
</p>
</body>
</html>
Output:
As we can see in the output image that the paragraph is now divided into three columns just like the newspaer.
Specifying Gap between columns in CSS
The CSS multi-column allows us to specify the gap between the multiple columns. We can set the size of the gap between the multiple columns of an element using the column-gap property.
Example: Specifying gap between multiple columns in CSS
In the given example, we have provided the gap between the multiple columns that we have created in the previous topic by specifying the column-gap property with a value of 60px for the paragraph.
<!DOCTYPE html>
<html>
<head>
<title>CSS Multi Column Layout</title>
<style>
.multi_col{
column-count: 3;
column-gap: 60px;
}
</style>
</head>
<body>
<p class="multi_col">
The CSS multi-column layout is a CSS module that supports the multi-column layout. The multi-column layout is used to layout the content into a set of column boxes and also specifies that how content should flow from column to column, margin between columns, gap sizes between columns, and column rules along with their appearance.
To create the CSS multi-column layout we have to specify the column-count property which specify the number of columns the element should be divided.
</p>
</body>
</html>
Output:
CSS column rules
The CSS multi-column layout allows us to add a vertical line between the multiple columns of the element by using the column-rule property. This property is a shorthand property of column-rule-* for setting the width, style, and color of the rule using a single property.
Example: Specifying column-rule property for the multi-columns in CSS
In this example, we have added the vertical lines between the columns by specifying the column-rule property with value 5px solid black. This value creates a vertical line that thickness is 5px with solid patter and the color is black.
<!DOCTYPE html>
<html>
<head>
<title>CSS Multi Column Layout</title>
<style>
.multi_col{
column-count: 3;
column-gap: 60px;
column-rule: 5px solid black;
}
</style>
</head>
<body>
<p class="multi_col">
The CSS multi-column layout is a CSS module that supports the multi-column layout. The multi-column layout is used to layout the content into a set of column boxes and also specifies that how content should flow from column to column, margin between columns, gap sizes between columns, and column rules along with their appearance.
To create the CSS multi-column layout we have to specify the column-count property which specify the number of columns the element should be divided.
</p>
</body>
</html>
Output:
As we can see in the output image that there is a black horizontal line between each column.
CSS column-span
We can span the columns of the element using the column-span property. The elements that span more than one column are called spanning elements.
Live Example: Spanning the columns using column-span property
In the given example, we have spanned all the columns using the column-span property but you can also span a specific number of columns.
Conclusion
In this lesson, we have learned how to create multiple columns in a layout just like the newspaper section as well as how content should display from one column to another, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.
