Want to create a magazine-style layout with multiple columns? The CSS columns property makes it simple! Using the columns shorthand, you can easily divide content into multiple columns, creating a more visually appealing and readable layout. In this article, we’ll dive into how the columns shorthand works and how you can use it to style your content.
What is the Columns Shorthand?
The columns shorthand is a powerful tool in CSS that allows you to control both the number of columns and their width in one line. It combines two key properties:
column-count: Specifies how many columns you want.column-width: Sets the minimum width for each column.
By using the columns shorthand, you can define either one or both values at once, giving you more flexibility with less code.
Here’s the syntax:
columns: <column-width> <column-count>;Let’s break it down with examples to see how it works.
Examples
Specifying Only the Column Count
If you know exactly how many columns you want, use column-count through the columns shorthand. The browser will automatically adjust the width of the columns to fit within the container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Column Layout</title>
<style>
.container {
columns: 3;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a turpis nec libero elementum eleifend. Nulla facilisi.</p>
<p>In faucibus velit vitae neque vehicula, nec interdum nunc dapibus. Sed luctus enim at sem finibus, vel scelerisque ipsum vehicula.</p>
</div>
</body>
</html>In this example, the content inside the .container is split into 3 columns. The browser handles the width of each column for you.
Specifying Only the Column Width
If you’d prefer the columns to have a certain width and let the browser figure out how many columns fit, use column-width in the shorthand.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Column Layout</title>
<style>
.container {
columns: 250px;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a turpis nec libero elementum eleifend. Nulla facilisi.</p>
<p>In faucibus velit vitae neque vehicula, nec interdum nunc dapibus. Sed luctus enim at sem finibus, vel scelerisque ipsum vehicula.</p>
</div>
</body>
</html>Here, each column will be at least 250px wide, and the browser will fit as many columns as possible within the container.
Combining Column Count and Column Width
You can also specify both the number of columns and the minimum width of each column by combining column-width and column-count in the shorthand.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Column Layout</title>
<style>
.container {
columns: 200px 3;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a turpis nec libero elementum eleifend. Nulla facilisi.</p>
<p>In faucibus velit vitae neque vehicula, nec interdum nunc dapibus. Sed luctus enim at sem finibus, vel scelerisque ipsum vehicula.</p>
</div>
</body>
</html>In this example, you’ve asked for 3 columns, each with a minimum width of 200px. This gives you precise control over the layout.
Why Use the Columns Shorthand?
The columns shorthand is a clean, efficient way to handle multi-column layouts. Instead of writing separate lines for column-count and column-width, you can combine them into one, reducing code clutter. It’s flexible too—you can define just one value or both, depending on your needs.
Conclusion
With the CSS columns shorthand, creating multi-column layouts is easier than ever. Whether you want a specific number of columns, a minimum column width, or both, the columns property gives you flexibility and control. Try it out in your next project and see how it can transform your content!
