Multi Column Layout In CSS

Multi columns layout feature of CSS is used to break a long text into multi-column layout text like a newspaper.

CSS Multi Column Layout Property

column-count
column-width
columns
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-fill

Let us see each and every column property.

Multiple Column Count

The column-count property denoted the number of columns.

General Syntax

      column-count: number;

Try it now

Source Code

          .col-count {
  background: #f1f1f1;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  border: 1px solid teal;
  padding: 6px;
}

Try it now

Column Width Property

The column-width property is used to set the width of the column.

auto: Browser will automatically assign the optimal width
length-val: You need to set the valid value of the column length
inherit: It will get the width from its parent .

General Syntax

      column-width: auto| length-val| inherit;

Try it now

Source Code

          .col-width {
  background: #f1f1f1;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-width: 100px;
  -moz-column-width: 100px;
  column-width: 100px;
  border: 1px solid teal;
  padding: 6px;
}

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4