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).
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-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-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 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:
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:
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:
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>
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