CSS - Multiple-column layout

CSS provides a multiple-column layout that helps is displaying the content in columns. It appears like that in a newspaper. This is generally referred to as multicol.

CSS Multiple-column layout - Three-column layout

A three-column layout contains three columns. Multicol is enabled using the properties such as column-count or column-width. Let us see the examples using these two properties:

In the following example, column-count is used and the content is displayed in three columns.

<html>
<head>
<style> 
   .multicol-col-count {
      column-count: 3;
   }
</style>
</head>
<body>
   <h1>column-count Property</h1>
   <p>As per the <strong>column-count</strong> property the content is displayed in columns:</p>

   <div class="multicol-col-count">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </div>
</body>
</html>

CSS Multiple-column layout - Setting column-width

In the following example, column-width is used and the content is displayed in columns based on the column width.

<html>
<head>
<style> 
   .multicol-col-width {
      column-width: 200px;
   }
</style>
</head>
<body>
   <h1>column-width Property</h1>
   <p>As per the <strong>column-width</strong> property the content is displayed in columns, based on the width of the column:</p>

   <div class="multicol-col-width">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </div>
</body>
</html>

CSS Multiple-column layout - Styling columns

You can not style columns created by multicol, individually. There are some properties provided by CSS that let you modify the way columns are displayed.

1. column-gap property can be used to change the size of the gap between the columns.

2. column-rule property is to add a rule between columns. column-rule is a shorthand for properties, column-rule-color, column-rule-style, and column-rule-width. It accepts same values as the border property.

In the following example, column-rule is used as a shorthand property to style the columns.

<html>
<head>
<style> 
   .multicol-col-rule {
      column-count: 4;
      column-gap: 50px;
      column-rule: 5px dashed red;
   }
</style>
</head>
<body>
   <h1>column-rule Property</h1>
   <p>As per the <strong>column-rule</strong> property the content is displayed in columns, and styles are added to the columns:</p>

   <div class="multicol-col-rule">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </div>
</body>
</html>

CSS Multiple-column layout - Spanning columns

An element can be made to span across the columns, in which case, the content breaks where the spanning element is added and then continues below the spanning element. It creates a new set of columns. When you want an element to span all the columns, add the value all for column-span property.

In the following example, column-span is used to add an element that spans across all the columns.

<html>
<head>
<style> 
   .multicol-col-rule {
      column-count: 3;
      column-gap: 50px;
      column-rule: 5px dashed red;
   }

   h1 {
      column-span: all;
      background-color: lightskyblue;
   }
</style>
</head>
<body>
   <p>As per the <strong>column-span</strong> property the element gets spanned across all the columns:</p>

   <div class="multicol-col-rule">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <h1>Heading spanning across all the columns</h1>
      <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
   </div>
</body>
</html>

CSS Multiple-column layout - Columns and fragmentation

In a multiple-column layout the content is displayed in columns as they are fragmented. In order to control the breaking of content in a multicol or paged media, CSS provides property break-inside. This property lets the content break such that it does not fragment across the columns.

Fragmentation Without break-inside Property

In the following example you will see the fragmentation of content in columns without using the break-inside property:

<html>
<head>
<style> 
   .container {
      column-count: 3;
      column-gap: 20px;
   }

   .box {
      background-color: lightskyblue;
      border: 2px solid black;
      padding: 5px;
      margin: 20px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <h1>Heading</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>
      
      <div class="box">
         <h1>Heading</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>
   </div>
</body>
</html>

Fragmentation Using break-inside Property

In the following example you will see the fragmentation of content in columns using the break-inside property:

<html>
<head>
<style> 
   .container {
      column-count: 3;
      column-gap: 20px;
   }

   .box {
      break-inside: avoid;
      background-color: lightskyblue;
      border: 2px solid black;
      padding: 5px;
      margin: 20px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <h1>Heading</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>
      
      <div class="box">
         <h1>Heading</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>
   </div>
</body>
</html>

Related properties

CSS supports multiple columns to arrange the text as a news paper structure. Following table shows the list of properties that are supported by CSS in relation to multi-column layout:

Property	Description
column-count	Specifies the number of columns an element is divided into when displayed in a multi-column layout.
column-fill	Specifies how to fill columns.
column-gap	Sets the size of the gap between an element's columns.
column-width	Sets the column width in a multi-column layout.
column-rule	Shorthand property that sets the color, style, and width of the line drawn between columns in a multi-column layout.
column-rule-color	Sets the color of the line drawn between columns in a multi-column layout.
column-rule-style	Sets the style of the line drawn between columns in a multi-column layout.
column-rule-width	Sets the width of the line drawn between columns in a multi-column layout.
column-span	Defines whether an element should span across one column or all columns, in a multi-column layout.

Print Page