CSS columns Property

CSS columns Property

This property is a shorthand definition of the number of columns and their widths in a multicolumn text flow.

Syntax -

columns: column-count width

Now we will see the values with their descriptions -

Value	Description
auto	This sets the column-width and column-count to auto, and this the default value.
column-width	width is a positive CSS length defining the width of each column.
column-count	column-count is a positive integer for the number of columns to flow the text into

Now we will see the example -

Example -

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
}
.one {
columns: 100px 3;
column-rule-width: 5px;
column-fill: balance;
column-rule-style: dashed;
column-rule-color: rgb(149, 131, 253);
}
.two {
columns: 100px 2;
column-fill: balance;
column-gap: 60px;
column-rule-width: 5px ;
column-rule-style: double;
column-rule-color: rgb(227, 142, 253);
}

</style>
</head>
<body>
<h1>This is a sample heading</h1>

<div class="one">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam minus soluta distinctio reiciendis, asperiores dolore dolorem labore molestias libero officia quia consectetur. Omnis id assumenda excepturi dolorem tempore totam sit aut maiores sequi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, vel. Animi laudantium id sit molestiae aspernatur, minima veritatis molestias reiciendis ea assumenda obcaecati sunt facilis optio vitae officiis exercitationem voluptatem quas laboriosam LOREM333
</div>
<hr>
<br>

<h1>This is a sample heading</h1>

<div class="two">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, voluptatibus perferendis? Eius modi libero placeat doloribus a dolor eveniet ratione cumque laboriosam sequi sed officiis omnis facilis minima earum temporibus atque tempora ipsum, minus est saepe hic animi! Placeat, non commodi tempora laudantium nesciunt labore minima! Quo quia placeat dolore mollitia beatae eum repellendus magnam nam totam aliquam, blanditiis assumenda vitae, tempore, delectus nesciunt ducimus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit.harum.</div>

</body>
</html>

Output -