As the range of screen sizes grows with each new device, designing single, wide text blocks becomes impractical. Manually creating text columns is a laborious task, while using JavaScript for dynamic splitting can be hit or miss across different environments. Ideally, these styling issues should be addressed within CSS itself, without resorting to external frameworks or float layouts, right?
Luckily, CSS3 offers a seamless method to divide your text into columns, complete with customizable gutters, giving you precise control over spacing, unlike the automatic settings used by many frameworks.
What’s more, CSS3 columns will gracefully fall back in older browsers, maintaining site integrity even for users of antiquated platforms like Netscape Navigator.
Compatibility with Web Browsers
It’s crucial to recognize that while modern web browsers support CSS3’s multi-column features — inclusive of IE10 and beyond — some older versions such as IE9 do not. Despite decent support, for the best cross-browser experience, remember to include vendor prefixes for webkit (-webkit-) and mozilla (-moz-). Prefixes for IE and Opera such as -ms- or -o- are unnecessary as they either fully support columns or do not at all.
Styling Properties
A collection of CSS properties exists specifically for column layout customization, which includes:
- column-count: sets the desired number of columns.
- column-width: establishes the width of each individual column, though browsers may adjust this value.
- column-gap: defines the space between adjacent columns.
- column-rule-width: indicates the width of the ‘rule’, or border, between columns.
- column-rule-style: specifies the style of this border.
- column-rule-color: decides the color of the border.
- column-span: tells how many columns a particular element should span across, similar to colspan and rowspan in table cells, ideal for headings.
These properties afford you complete mastery over columnar layouts, with column-count and column-gap being essential for a basic multi-column setup:
/* This creates a three-column layout with a 20px gap */
.cols3 {
column-count: 3;
column-gap: 20px;
}
For column rules, simply include the additional properties:
/* This results in a three-column layout with a 20px gap and a 1px solid black rule */
.cols3 {
column-count: 3;
column-gap: 20px;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #000;
}
Likewise, you can consolidate the rule properties in one line:
.cols3 {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}
To allow a heading to span all your columns, add the following:
/* This makes the h1 element span across three columns */
.cols3 h1{
column-span: all;
}
Live Demonstration
This technique is not limited to paragraphs; apply it to any HTML element. For example:
And here’s the complete code to bring this to life:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 Columns in Action</title>
<style type='text/css'>
.cols3 {
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #000;
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #000;
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}
.cols3 h1 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}
</style>
</head>
<body>
<div class='cols3'>
<h1>Integer posuere erat a ante</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor.</p>
</div>
</body>
</html>
Epilogue
Adopting CSS columns offers numerous benefits, from eliminating complex calculations and float-associated breaking on browser resize to writing cleaner, more semantic code. Given its robust support across major browsers, it’s time to embrace column layouts for future projects.
Are you harnessing the power of CSS3 for column layouts, or do you prefer traditional methods like floats and positioning? Share your insights and experiences with legacy browser compatibility in the comments below.
Primary image/thumbnail, column image courtesy of Shutterstock.
