CSS Multi-column Layout

Written By: Avinash Malhotra

Updated on:

  1. Home
  2. Frontend
  3. CSS
  4. Multi Column Layout
  1. Multi-column
  2. column count
  3. column gap
  4. column rule

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

1 2

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>