SS Multiple Columns allows you to divide the content of an element into multiple columns. This feature can be useful for creating newspaper-style layouts, multi-column lists, and other types of content. In this tutorial, we’ll walk you through the steps of using CSS Multiple Columns.
Step 1: Create an HTML document
To begin, create an HTML document that includes the content you want to divide into columns. For this tutorial, we’ll create a simple example that includes a paragraph of text.
<!DOCTYPE html>
<html>
<head>
<title>CSS Multiple Columns Tutorial By Codezi</title>
<style>
/* Your CSS code will go here */
</style>
</head>
<body>
<div class="example">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor eros vel magna euismod, sed faucibus ligula venenatis. Phasellus tincidunt augue et sem convallis tincidunt. Fusce sed ipsum malesuada, malesuada turpis eu, tincidunt sapien. Nam mattis augue enim, eget posuere quam mollis nec. Integer auctor magna vel odio convallis, in imperdiet nisi sagittis. In pulvinar ipsum quis neque posuere feugiat.</p>
</div>
</body>
</html>
Step 2: Define the columns
To define the columns, use the column-count property. This property specifies the number of columns that the content should be divided into. For example, to divide the content into two columns, you can use the following CSS code:
.example {
column-count: 2;
}
Step 3: Style the columns
You can style the columns using CSS properties such as column-gap, column-rule, and column-width. These properties allow you to control the spacing between columns, add a vertical line between columns, and set the width of each column, respectively. For example:
.example {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid black;
column-width: 200px;
}
This code will divide the content into three columns, with a gap of 20 pixels between each column, a black line between each column, and a fixed width of 200 pixels for each column.
Step 4: Control the column flow
You can control how the content flows between columns using the column-fill property. This property specifies how the content should be distributed across columns, either by trying to balance the content equally between columns (balance) or by filling one column completely before moving to the next column (auto). For example:
.example {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid black;
column-width: 200px;
column-fill: balance;
}
This code will try to balance the content equally between columns, so that each column has roughly the same amount of content.
Step 5: Add browser prefixes
Finally, it’s a good idea to add browser prefixes to your CSS code to ensure that it works across different browsers. For example:
.example {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
-webkit-column-width: 200px;
-moz-column