/    /  CSS columns

CSS columns

 

Columns CSS property is a shorthand property(can take several values at a time) for setting both the column-width and the column-count properties at the same time.

 

Syntax:

 

columns: [ column-width column-count ] | initial | inherit

 

Property Values:

 

  • column-width : Set the minimum width for columns.
  • column-count : The maximum number of columns.
  • Initial :                      The property to its default value.
  • Inherit : The property from its parent element.

 

Example:

 

<!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>

<h2> The columns Property </h2>

<h3> Set the column-width to 100px, and column-count 4 </h3>
<div class="div1">
Hi, Welcome to I2tutorials. Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.
</div>

<h3> Set the column-width to 100px, and column-count to 6 </h3>
<div class="div2">
Hi, Welcome to I2tutorials. Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.Enter Text here.
</div>

</body>
</html>

 

OUTPUT:

 

CSS columns