CSS - Multiple Column Layout

Previous
Quiz
Next

CSS provide several properties to design multiple column layout for webpages. The multiple column layout is used generally for layout designing in newspapers, online blogs, books, etc. In this chapter we will discuss how to create and style multiple column layout using HTML and CSS.

Table of Contents


 

CSS Create Multiple Columns

In CSS, we can use the column-count property to specify number of columns for displaying texts inside any element. Let us see an examples:

Example

Open Compiler
<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-count {
            column-count: 3;
        }
    </style>
</head>

<body>
    <h2> Three Column Layout </h2>

    <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 mol
    </div>
</body>

</html>

Setting Column Width

To make column layout, it is not necessary to use column-count property, we can also use column-width property. Number of columns will be determined automatically based on width of column specified. Let see an example.

Example

Open Compiler
<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-width {
            column-width: 100px;
        }
    </style>
</head>

<body>
    <p> <strong> Column Width 100px </strong> </p>
    <div class="multicol-col-width">
        Lorem ipsum dolor sit amet, con sec tetuer ad ipis cing el 
        sed diam nonummy nibh eui smod tincidunt ut laoreet dolo 
        magna aliquam erat volutpat. Ut wisi enim ad minim veni, 
        quis nostr ud exerci tation ulla mc orper suscipit lob ort 
        nisl ut aliq uip ex ea comm odo cons equat. Duis au tem 
        eum iriure dolor in hen drerit in vul put ate ve lit esse mol
        estie con se quat, vel ill
    </div>
</body>

</html>

CSS Specify the Gap Between Columns

To specify gap between columns, we can use column-gap property. Let see an example.

Example

Open Compiler
<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-width {
            column-width: 100px;
            column-gap: 40px;
        }
    </style>
</head>

<body>
    <p> <strong> Column Gap 40px </strong> </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 mol
        estie consequat, vel illum dolore eu feugiat nulla facilisis 
    </div>
</body>

</html>

CSS Column Rules

In CSS multiple column layout, we can add rules (or lines) between columns using column rule properties. Following are column-rule properties in CSS:

  • column-rule-style: Defines the style of the line between columns (e.g., solid, dashed).
  • column-rule-color: Sets the color of the line between columns.
  • column-rule-width: Specifies the width (thickness) of the line between columns.
  • column-rule: A shorthand property to set the style, color, and width of the line between columns.

Let see an example for these properties.

Example

Open Compiler
<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-width {
            column-count: 3;
            column-rule-style: dashed;
            column-rule-color: red;
            column-rule-width: 3px;
        }
    </style>
</head>

<body>
    <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 mol
        estie consequat, vel illum dolore eu feugiat nulla facilisis 
        averunt lectores legere me lius quod ii legunt saepius.
    </div>
</body>

</html>

CSS Spanning Columns in Multiple Column Layout

If you want to add a heading, or any other elements that spans across all the columns in layout, You can use column-span property. The value of this property following:

  • column-span: all - The heading will span over every other column in layout.
  • column-span: none - The heading will be placed as a seperate column.
Open Compiler
<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-rule {
            column-count: 3;
            column-rule: 3px solid;
        }

        .colspan-none {
            column-span: none;
            background-color: lightskyblue;
        }
        .colspan-all{
            column-span: all;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
   <div class="multicol-col-rule">
        <h1 class="colspan-none" >Heading on First Columns</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipi
            scing elit, sed diam nonummy nibh euismod tincidunt ut 
            laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor 
            sit amet, conse ctetuer adip iscing elit, sed diam nonu 
            mmy nibh euis mod tincidunt ut laoreet dolore magna aliq
            am erat volutpat.
        </p>
    </div>     

    <div class="multicol-col-rule">
        <h1 class="colspan-all" >Heading spanning across all columns</h1>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci ta
            tion 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
        </p>
   </div>
</body>
</html>

Following table shows all the properties that are supported in CSS for multiple column layout.

Property Description Example
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
Previous
Next
Advertisements