CSS Multi-column Layout
Splitting text into several columns, the way a newspaper does, is easy with the CSS Multi-column Layout Module.
CSS Multi-column Properties
These are the multi-column properties covered here:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
CSS Create Multiple Columns
The columns an element is split into are counted by the column-count property.
Example
The text of this <div> element flows into 3 columns:
Prompt
Create an HTML page with a
<div> element containing a long paragraph of Lorem Ipsum text. Use CSS column-count: 3 to divide the text into 3 columns.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-count</title>
<style>
div {
column-count: 3;
}
</style>
</head>
<body>
<h1>Divide Text Into 3 Columns</h1>
<div>
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 Gap
Space between the columns comes from the column-gap property.
Example
These columns sit 40 pixels apart:
Prompt
Create an HTML page with a
<div> element containing a long paragraph of Lorem Ipsum text. Use CSS column-count: 3 and column-gap: 40px to divide the text into 3 columns with a 40-pixel gap between them.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-gap</title>
<style>
div {
column-count: 3;
column-gap: 40px;
}
</style>
</head>
<body>
<h1>Specify Column Gap</h1>
<div>
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>
Column Subpages
CSS multiple columns continue on this subpage:
- Column Rules — covers
column-rule,column-span,column-width
CSS Multi-columns Properties
Here is every multi-column property with its purpose:
column-count— Sets the column total for an element to be split intocolumn-fill— Controls the way columns get filledcolumn-gap— Sets the gap left between columnscolumn-rule— Shorthand that sets every column-rule-* property at oncecolumn-rule-color— Colors the rule drawn between columnscolumn-rule-style— Styles the rule drawn between columnscolumn-rule-width— Sets how wide the rule drawn between columns iscolumn-span— Sets the span of an element, counted in columnscolumn-width— Suggests an optimal column width to aim forcolumns— Shorthand that sets both column-width and column-count together