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 very imporant proprty 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.



    
        
    
    
        
        
        
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.

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



    
        
    
    
        
        
        
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.

#Example All in on property



    
        
    
    
        
        
        
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.

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.



    
        
    
    
        
        
        

Heading for all column

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.

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.



    
        
            
    
    
        
        

Two Equal Columns

Column One

1 text content data ........

Column Two

2 content data ........

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.


Heading

Paragraph

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 hight columns use a display property. Where parent container will be “display: table” and child “display:table-cell“.



    
        
            
    
    
        
        
        

Create Equal Height Columns

Column 1 heading

Some text ...

Some text ...

Column 2 heading

Some text ...

Column 3 heading

Some other text..

Some other text..

Output:

Css equal height columns output

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

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

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

Complete code example



    
        
            
    
    
        
        

Responsive Column Layout HTML

Column 1 test

Some text..

Column 2 test

Some text..

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.