CSS Multi-column Layout
Written By: Avinash Malhotra
Updated on:
Multi-column layout
CSS Multi-column layouts includes multiple properties to add multiple columns in a layout or text, like newspapers or magazines. It includes column-count and other properties add multiple columns. Some other properties like column-gap, column-rule etc are used to enhance its look.
Multi-column layout example
Change Column Count
This examples shows multi column layouts example using column count property. The default value of column-count is 1. But we can change column using column-count property. Column-count is compulsory in multi-column layouts.
<style>
p{
column-count: 1;
}
</style>
Column-count
column-count is compulsory property in multi-column layouts. The default value of column is 1. To add multiple columns, change column-count from 1 to 2 or more. This will add n number of columns.
This examples shows multi column layouts example using column count property. The default value of column-count is 1. But we can change column using column-count property. Column-count is compulsory in multi-column layouts.
<style>
p{
column-count: 1;
}
</style>
Column-gap
column-gap property is used to add gap or gutter between columns. The default value of column-gap is 1em.
This examples shows multi column layouts example using column count property and column gap. The default value of column-count is 1, and default column-gap is 1em or normal. But we can change column gap using column-gap property. Column-count is optional.
( in px)
<style>
p{
column-count:2;
column-gap: 20;
}
</style>
Column-rule
column-rule property is used to add gap or gutter between columns. The default value of column-gap is 1em.
This examples shows multi column layouts example using column count property and column gap. The default value of column-count is 1, and default column-gap is 1em or normal. But we can change column gap using column-gap property. Column-count is optional.
<style>
p{
column-count:2;
column-rule: 1px solid blue;
}
</style>
This examples shows multi column layouts example using column count property and column gap. The default value of column-count is 1, and default column-gap is 1em or normal. But we can change column gap using column-gap property. Column-count is optional.
<style>
p{
column-count:2;
column-rule: 1px dashed red;
}
</style>
This examples shows multi column layouts example using column count property and column rule. The default value of column-rule is none, and is similar to border property with three values, rule-style, rule-width and rule-color.
<style>
p{
column-count:3;
column-rule: 3px double green;
}
</style>