CSS3 Multi columns

CSS3 supported multi columns to arrange the text as news paper structure.

Some of most common used multi columns properties as shown below −

Values

Description

column-count

Used to count the number of columns that element should be divided

column-fill

Used to decide, how to fill the columns

column-gap

Used to decide the gap between the columns

column-rule

Used to specifies the number of rules

rule-color

Used to specifies the column rule color

rule-style

Used to specifies the style rule for column

rule-width

Used to specifies the width

column-span

Used to specifies the span between columns

Example

Below example shows the arrangement of text as new paper structure.

<html>

   <head>

  

      <style>

         .multi {

            /* Column count property */

            -webkit-column-count: 4;

            -moz-column-count: 4;

            column-count: 4;

           

            /* Column gap property */

            -webkit-column-gap: 40px;

            -moz-column-gap: 40px;

            column-gap: 40px;

           

            /* Column style property */

            -webkit-column-rule-style: solid;

            -moz-column-rule-style: solid;

            column-rule-style: solid;

         }

      </style>

     

   </head>

   <body>

  

      <div class="multi">

        Example Point originated from the idea that there exists a class of readers who respond

      better to online content and prefer to learn new skills at their own pace from the comforts

      of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and

      elated by the response it generated, we worked our way to adding fresh   Example to our

      repository which now proudly flaunts a wealth of   Example and allied articles on topics

      ranging from programming languages to web designing to academics and much more.

      </div>

     

   </body>

</html>

For suppose, if user wants to make text as new paper without line, we can do this by removing style syntax as shown below

.multi {

   /* Column count property */

   -webkit-column-count: 4;

   -moz-column-count: 4;

   column-count: 4;

  

   /* Column gap property */

   -webkit-column-gap: 40px;

   -moz-column-gap: 40px;

   column-gap: 40px;

}