The CSS Multi-column Layout module is a powerful tool that lets you easily create multi-column layouts for your web pages. The rise of responsive design means that it’s important to understand how to use this module.
You can use column properties to create flexible and dynamic layouts that adapt to different screen sizes.
Specifying Column Number, Width, and Gap
To create an appropriate multi-column layout for your page content, you should start by deciding how many columns you want it to span. One of the most important properties in the Multi-column module is the column-count property, which you use to set the number of columns to divide the content into.
For example:
.container {
column-count: 3;
}
You can also specify the width and gap of the columns. You can set the column width value using any of the supported CSS units like px, em, or %.
If column-width is set to auto, the browser will calculate the width of each column based on the column-count property and the available space inside your layout.
For example, this CSS declares 3 columns, each with a width of 200 pixels:
.container {
column-count: 3;
column-width: 200px;
}
The column-gap property specifies the gap, or space, between the columns in a multi-column layout. It will set the size of the empty blank spaces between adjacent columns and can take a length value in pixels, ems, or any other supported units.
For example:
.container {
column-count: 3;
column-gap: 20px; /* sets the gap between columns to 20 pixels */
}
By default, the value of column-gap is set to normal. Your browser chooses this value to achieve consistent spacing between columns in your layout while remaining visually pleasing. This value can also vary between browsers and may also depend on the font size, line height, position property, and other layout properties of the content of the columns.
Making Sure Columns Balance
CSS columns try to fill up all available space inside a layout. This can sometimes result in columns that have significantly different heights, making the layout look uneven.
To balance columns, you should make sure that each column in your layout has approximately the same amount of content.
You can achieve this by setting the CSS column-fill property to balance. A browser will then attempt to distribute the content evenly across all columns so that they are roughly the same height.
The column-fill property is set to balance by default, but a value of auto will change this behavior. Using auto distributes the content across columns based on the available space. This can result in uneven spacing between columns and uneven column heights. It can even produce a layout with empty columns.
Here's an example of how to use the column-fill property to balance columns in a multi-column layout:
.multi-column-layout {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
In this example, we have a multi-column layout with three columns and a gap of 20 pixels between each column. By setting the column-fill property to balance, we ensure that the content distributes evenly across the columns, resulting in balanced column heights.
It's important to note that the column-fill property may not work well for all layouts and may result in uneven spacing between columns. In such cases, you may need to use JavaScript to manually balance the columns. Remember to follow best practices and use progressive enhancement so that you do not rely on JavaScript.
Putting It All Together
You can bring together everything you’ve learned about implementing a layout with CSS columns and use it to create a magazine-style layout.
First, create the basic HTML structure. Use a container element to wrap your content, then create several child elements which you can then layout in columns.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSScolumns.css" />
</head>
<body>
<!-- Container Element -->
<div class="magazine-layout">
<!-- Child Elements -->
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
</div>
</body>
</html>
To create a magazine-style layout using the CSS Multi-column module, combine the column-count, column-width, column-gap, and column-fill properties:
.magazine-layout {
column-count: 3;
column-width: 300px;
column-gap: 20px;
column-fill: balance;
}
.article {
background-color: #f8f8f8;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
break-inside: avoid-column;
}
This example also defines the break-inside property on the .article class, with a value of avoid-column. The property ensures that each article stays within a single column, rather than splitting across multiple columns. Here's what the layout should look like:
Using Fallbacks for Unsupported Browsers
It is important to note that the column-count property is not supported in all browsers. Browsers that do not support column-count, will display the content in a single column instead.
To provide fallback styles for unsupported browsers, you can use feature queries like @supports to detect support for the column-count property and provide alternative styles when the property is not supported.
For example:
.container {
/* Fallback for browsers that do not support column-count */
width: 100%;
}
/* Detect support for column-count */
@supports (column-count: 3) {
.container {
column-count: 3;
}
}
In this example, we use the @supports feature query to detect support for the column-count property. If the browser supports column-count, the container element will display in three columns. If the browser does not support column-count, it will display the content in a single column using the width property.
Breaking Content Into Columns
Overall, CSS columns provide a practical and powerful way to create flexible and responsive multi-column layouts that enhance the usability and user experience of web content.
By using CSS columns and JavaScript together, you can create even more sophisticated and dynamic layouts that adapt to different user preferences and device sizes, making your web content more accessible and engaging for your users.