CSS columns
CSS is all about presentation. Discover how CSS columns works to transform plain HTML into a premium user experience in the guide below.
The columns attribute within CSS determines both the quantity and width of columns within a single statement. This is a consolidated property capable of accepting multiple values simultaneously.
It is employed to establish both the column-count and column-width properties simultaneously. These properties are essential in determining the appearance of multiple columns. The column-count property defines the quantity of columns, while the column-width property determines the width of each column.
By combining the column-count and column-width properties, you can establish a multi-column design that seamlessly transitions to a single column on smaller browser widths without relying on media queries. However, it is important to be cautious when using both properties together as they may limit the adaptability and fluidity of the layout.
If the specified column count and width exceed the element's width, the browser will automatically decrease the column count to accommodate the specified column widths.
Syntax
columns: auto | column-width column-count| initial | inherit;
Values
The values of the properties are presented in the table below along with their corresponding descriptions.
| Value | Description |
|---|---|
auto |
It is the default value which sets the values ofcolumn-countandcolumn-widthto the default browser values. |
| column-width | It is used to set the minimum width for columns. However, the actual width of the column may be narrower or wider based on the available space. |
| column-count | It specifies the maximum number of columns. |
| Initial | It is used to set the property to its default value. |
| Inherit | It inherits the property from its parent element. |
If any of the value is omitted, then by default, the browser assumes the corresponding value to auto .
Example
In this instance, we are specifying two division elements, each containing content. The initial div element has a minimum width of 100 pixels and can accommodate up to four columns. Conversely, the second div element has a minimum width of 100 pixels and supports a maximum of six columns.
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
columns: 100px 4;
border: solid 2px black;
font-size: 20px;
}
.div2 {
columns: 100px 6;
border: solid 2px black;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The columns Property </h1>
<h4> The columns property is a shorthand property for column-width and column-count </h4>
<h3> Set the column-width to 100px, and column-count 4 </h3>
<div class="div1">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is committed to providing easy and in-depth tutorials on various technologies. Here, you will find lots of tutorials that are easy to understand and learn.
No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
<h3> Set the column-width to 100px, and column-count to 6 </h3>
<div class="div2">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is committed to providing easy and in-depth tutorials on various technologies. Here, you will find lots of tutorials that are easy to understand and learn.
No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</body>
</html>
Output
