Multiple Column Layout

Written by

in

Advanced Features

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
Setting Column Width
Spanning Columns in Multiple Column Layout

Specify Gap Between Columns
CSS Column Rules
Multiple Column Layout Related properties

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

<!DOCTYPE html><html><head><style> 
    .multicol-col-count {
        column-count: 3;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt; Three Column Layout &lt;/h2&gt;&lt;div class="multicol-col-count"&gt;
    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
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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



<!DOCTYPE html><html><head><style> 
    .multicol-col-width {
        column-width: 100px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&lt;strong&gt; Column Width 100px &lt;/strong&gt;&lt;/p&gt;&lt;div class="multicol-col-width"&gt;
    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
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Specify the Gap Between Columns



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



Example



<!DOCTYPE html><html><head><style> 
    .multicol-col-width {
        column-width: 100px;
        column-gap: 40px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&lt;strong&gt; Column Gap 40px &lt;/strong&gt;&lt;/p&gt;&lt;div class="multicol-col-width"&gt;
    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 
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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



<!DOCTYPE html><html><head><style> 
    .multicol-col-width {
        column-count: 3;
        column-rule-style: dashed;
        column-rule-color: red;
        column-rule-width: 3px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="multicol-col-width"&gt;
    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.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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.




<!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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="multicol-col-rule"&gt;&lt;h1 class="colspan-none" &gt;Heading on First Columns&lt;/h1&gt;&lt;p&gt;
        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.
    &lt;/p&gt;&lt;/div&gt;&lt;div class="multicol-col-rule"&gt;&lt;h1 class="colspan-all" &gt;Heading spanning across all columns&lt;/h1&gt;&lt;p&gt;
        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
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Multiple Column Layout Related properties



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. Try It
column-fill Specifies how to fill columns. Try It
column-gap Sets the size of the gap between an element's columns. Try It
column-width Sets the column width in a multi-column layout. Try It
column-rule Shorthand property that sets the color, style, and width of the line drawn between columns in a multi-column layout. Try It
column-rule-color Sets the color of the line drawn between columns in a multi-column layout. Try It
column-rule-style Sets the style of the line drawn between columns in a multi-column layout. Try It
column-rule-width Sets the width of the line drawn between columns in a multi-column layout. Try It
column-span Defines whether an element should span across one column or all columns, in a multi-column layout. Try It

Comments

Leave a Reply Cancel reply

More posts