Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

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.