CSS Column Rules
This page covers CSS column rules, span, and width properties.
CSS Column Rule
The column-rule-style property sets the style of the vertical line between columns. The column-rule-width property sets the width of that line. The column-rule-color property sets its color. The column-rule property is a shorthand for setting all three at once.
Rule style
Use column-rule-style to add a solid vertical rule between columns.
Prompt
Create a page with a div containing multiple paragraphs of text, split into 3 columns using column-count. Apply column-rule-style: solid to show a solid vertical rule between the columns.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-style</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
}
</style>
</head>
<body>
<h1>CSS column-rule-style</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Rule width
Use column-rule-width to set the width of the vertical rule between columns.
Prompt
Create a page with a div containing multiple paragraphs of text, split into 3 columns using column-count. Apply column-rule-style: solid and column-rule-width: 1px to set the width of the vertical rule between columns.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-width</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
column-rule-width: 1px;
}
</style>
</head>
<body>
<h1>CSS column-rule-width</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Rule color
Use column-rule-color to set the color of the vertical rule between columns.
Prompt
Create a page with a div containing multiple paragraphs of text, split into 3 columns using column-count. Apply column-rule-style: solid and column-rule-color: lightblue to color the vertical rule between columns.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-color</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
column-rule-color: lightblue;
}
</style>
</head>
<body>
<h1>CSS column-rule-color</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Rule shorthand
Use the column-rule shorthand to set the width, style, and color of the vertical rule in one declaration.
Prompt
Create a page with a div containing multiple paragraphs of text, split into 3 columns using column-count. Use the column-rule shorthand property set to "1px solid lightblue" to style the vertical rule between columns.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule shorthand</title>
<style>
div {
column-count: 3;
column-rule: 1px solid lightblue;
}
</style>
</head>
<body>
<h1>CSS column-rule shorthand</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
CSS Column Span
The column-span property sets how many columns an element should span across. This is often used for headings.
Example
Make an <h2> element span across all columns and center it.
Prompt
Create a page with a div split into 3 columns containing paragraphs of text. Add an h2 heading inside the div with column-span: all and text-align: center, so the heading spans across all columns.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-span</title>
<style>
div {
column-count: 3;
}
h2 {
column-span: all;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS column-span</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<h2>A Heading That Spans All Columns</h2>
<p>Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</p>
<p>Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus.</p>
</div>
</body>
</html>
CSS Column Width
The column-width property sets a suggested, optimal width for each column. The browser decides how many columns to create based on this width and the available space.
Example
Set the suggested optimal column width to 100px and let the browser determine the number of columns.
Prompt
Create a page with a div containing multiple paragraphs of text. Use column-width: 100px to let the browser determine the number of columns based on the suggested optimal width and available space.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-width</title>
<style>
div {
column-width: 100px;
}
</style>
</head>
<body>
<h1>CSS column-width</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>