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>