CSS Columns| Multiple, Height, Width, Break, Grid, Span | count 2 – 3

A CSS column makes content more readable and organized. The columns CSS property sets the multiple columns of an element using the column-count property. css column-count is a very important property to make columns in elements.

An example of CSS multi-column layout is newspapers. Where you can see the multiple columns of text (news).

Multiple CSS Columns count

Creating Column in HTML

You can create Columns in HTML elements using CSS with 2 different ways.

  • Using CSS columns Property
  • Modern way use CSS Flexbox

Let’s see both ways to get multiple column of HTML element in webpage.

1. CSS columns Property

First let’s see the available property list:-

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

These property is specially made for grid column layout.

CSS Create Multiple Columns example

User a column-count and assign the value. If the value is 2 then 2 columns created. Let’s see the example of CSS 3 columns on a div element.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .news{
                -webkit-column-count: 3; /* Chrome, Safari, Opera */
                -moz-column-count: 3; /* Firefox */
                column-count: 3;
            }
        </style>
    </head>
    <body>
        
        
        <div class="news">
            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.
        </div>
        
    </body>
</html>

Output: same way you can create a 2 columns.

CSS Create Multiple Columns example

CSS columns style |Gap, Width, Color

  • column-gap: 40px – 40px gap between columns
  • column-rule-style: solid – Solid line between columns
  • column-rule-width: 100px – Line width between columns
  • column-rule-color: lightblue: – Line color between columns

This is property for css column layout, you can change accordingly. The column-width part will define the minimum width for each column.

Shorted use of column-rule

column-rule: 1px solid lightblue;

Let’s see the example of example sets the gap, width, style, and color of the rule between columns with both ways with divs elements.

#Example separate used property

<!DOCTYPE html>
<html>
    <head>
        <style>
            .news{
                column-count: 3;
                column-gap: 40px;
                column-rule-style: dotted;
                column-rule-width: 100px;
                column-rule-color: grey;
            }
        </style>
    </head>
    <body>
        
        
        <div class="news">
            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.
        </div>
        
    </body>
</html>

#Example All in on property

<!DOCTYPE html>
<html>
    <head>
        <style>
            .news{
                column-count: 3;
                column-gap: 40px;
                
                /* style, width, color */
                column-rule: 1px solid lightblue;
            }
        </style>
    </head>
    <body>
        
        
        <div class="news">
            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.
        </div>
        
    </body>
</html>

CSS column span

The column-span property specifies how many columns an element should span across. Let’s see the example of h2 element span across all columns.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .newsc {
                -webkit-column-count: 3; /* Chrome, Safari, Opera */
                -moz-column-count: 3; /* Firefox */
                column-count: 3;
                column-rule: 1px solid black;
            }
        
        .heading {
            -webkit-column-span: all; /* Chrome, Safari, Opera */
            column-span: all;
        }
        </style>
    </head>
    <body>
        
        
        <div class="newsc">
            <h2 class="heading">Heading for all column</h2>
            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.
        </div>
        
    </body>
</html>

Output:

CSS column span output

2. Modern way use CSS Flexbox | display: flex

Let’s create CSS two columns. In this example both columns are equals.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                * {
                    box-sizing: border-box;
                }
            
            .row {
                display: flex;
            }
            
            .column {
                flex: 50%;
                padding: 10px;
                height: 300px; /* Only for demonstration */
            }
            </style>
    </head>
    <body>
        
        <h2>Two Equal Columns</h2>
        
        <div class="row">
            <div class="column" style="background-color:#aaa;">
                <h2>Column One</h2>
                <p>1 text content data ........</p>
            </div>
            <div class="column" style="background-color:#bbb;">
                <h2>Column Two</h2>
                <p>2 content data ........</p>
            </div>
        </div>
        
    </body>
</html>

Output:

Modern way use CSS Flexbox

How to css column break?

The CSS column break rules are neglected and very poorly supported. We found this code in stackoverflow.com.

<!-- HTML code -->
<div class="columns">
    <div class="keeptogether">
       <h1>Heading</h1>
       <p>Paragraph</p>
    </div>
 </div>

<!-- CSS code -->

div.columns {
    column-width: 300px;
    -moz-column-width: 300px;
    -webkit-column-width: 300px;
 }
 div.keeptogether {
    display: inline-block;
    width: 100%;
 }


Css equal height columns

For equal height columns use a display property. Where parent container will be “display: table” and child “display:table-cell“.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                .container {
                    display: table;
                    width: 100%;
                }
            .col {
                display: table-cell;
                padding: 16px;
            }
            </style>
    </head>
    <body>
        
        
        <h2> Create Equal Height Columns</h2>
        
        <div class="container">
            <div class="col" style="background:lightblue">
                <h2>Column 1 heading</h2>
                <p>Some text ...</p>
                <p>Some text ...</p>
            </div>
            
            <div class="col" style="background:pink">
                <h2>Column 2 heading</h2>
                <p>Some text ...</p>
            </div>
            
            <div class="col" style="background:lightgrey">
                <h2>Column 3 heading</h2>
                <p>Some other text..</p>
                <p>Some other text..</p>
            </div>
        </div>
        
    </body>
</html>

Output:

Css equal height columns output

Question: How to create css equal height columns responsive layout?

Answer: A css column can be responsive. Use the below code where two columns will stack on top of each other until the max-width equation true. Where above examples just reducing the size of the column by decreasing screen sizes.

/* add this code in css */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Complete code example

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                * {
                    box-sizing: border-box;
                }
            
            /* equal columns */
            .column {
                float: left;
                width: 50%;
                padding: 15px;
                height: 200px;
            }
            
            /* Clear floats */
            .row:after {
                content: "";
                display: table;
                clear: both;
            }
            
            @media screen and (max-width: 600px) {
                .column {
                    width: 100%;
                }
            }
            </style>
    </head>
    <body>
        
        <h2>Responsive Column Layout HTML</h2>
        
        <div class="row">
            <div class="column" style="background-color:#7CBBFF;">
                <h2>Column 1 test</h2>
                <p>Some text..</p>
            </div>
            <div class="column" style="background-color:#B08CFF;">
                <h2>Column 2 test</h2>
                <p>Some text..</p>
            </div>
        </div>
        
    </body>
</html>
css equal height columns responsive layout

If you have any doubt and suggestion on this tutorial, do comment in below.

Note: The All CSS column layout examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.