Setting Column Count or Width using CSS3


Use the columns property in CSS3 to set the column count and width. It is a shorthand property for column-width and column-count properties. With that, you can set both the properties separately as well.

The column property

The column property works as a shorthand property for the column-with and column-count properties. The following is the syntax −

columns: auto|column-width column-count|initial|inherit;

Example

Let us see an example to set the columns property to set. This sets both the column width and count to the auto value −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         -webkit-columns: auto auto; /* Chrome, Safari, Opera */
         -moz-columns: auto auto; /* Firefox */
         columns: auto auto;
      }
   </style>
</head>
<body>
   <h1>Machine Learning</h1>
   <div class="demo">
      Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
   </div>
</body>
</html>

Example

Let us now see another example. Here, we have set the column-count to 3 and width to 40px −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         -webkit-columns: 40px 3; /* Chrome, Safari, Opera */
         -moz-columns: 40px 3; /* Firefox */
         columns: 40px 3;
      }
   </style>
</head>
<body>
   <h1>Machine Learning</h1>
   <div class="demo">
      Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
   </div>
</body>
</html>

The column count property

To set the column count, use the column-count property −

.demo {
   column-count: 4;
}

Example

Let us see an example −

<!DOCTYPE html>
<html>
<head>
   <style> 
      .demo {
         column-count: 4;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <div class="demo">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum bibendum mi, nec scelerisque erat porta vitae. Nulla efficitur laoreet mauris, vel commodo risus tincidunt eu. Praesent et accumsan nisl. Sed quis finibus tortor, vitae pellentesque dui. Donec auctor libero libero, vitae vestibulum nibh condimentum at. Nam diam ipsum, rhoncus sed ultricies at, suscipit eget metus. Integer in ligula a velit congue semper et eu nisi. Mauris semper arcu sed nisl porta tincidunt.

      Cras lobortis imperdiet ultrices. Curabitur dictum vestibulum condimentum. Cras tincidunt pellentesque felis ultricies elementum. Quisque nibh magna, vehicula in volutpat ac, posuere feugiat libero. Fusce dapibus nunc eget odio scelerisque, eu pulvinar magna suscipit. Donec venenatis semper hendrerit. Cras mattis sodales viverra. Phasellus volutpat leo odio, id interdum libero venenatis quis. Nunc nec quam arcu. Cras pellentesque, felis vel suscipit sollicitudin, orci sapien placerat quam, vitae pretium purus leo id erat. Praesent blandit urna eget tortor commodo, sed pulvinar enim molestie. Fusce erat velit, gravida sed vestibulum in, consectetur at libero. Vestibulum eros mi, faucibus quis nibh sit amet, hendrerit dapibus arcu.
   </div>
</body>
</html>

The column width property

The set the width of columns, use the column-width property −

.demo {
   column-width: 70px;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style> 
      .demo {
         column-width: 70px;
      }
   </style>
</head>
<body>
   <h1>DemoHeading</h1>
   <div class="demo">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum bibendum mi, nec scelerisque erat porta vitae. Nulla efficitur laoreet mauris, vel commodo risus tincidunt eu. Praesent et accumsan nisl. Sed quis finibus tortor, vitae pellentesque dui. Donec auctor libero libero, vitae vestibulum nibh condimentum at. Nam diam ipsum, rhoncus sed ultricies at, suscipit eget metus. Integer in ligula a velit congue semper et eu nisi. Mauris semper arcu sed nisl porta tincidunt.

      Cras lobortis imperdiet ultrices. Curabitur dictum vestibulum condimentum. Cras tincidunt pellentesque felis ultricies elementum. Quisque nibh magna, vehicula in volutpat ac, posuere feugiat libero. Fusce dapibus nunc eget odio scelerisque, eu pulvinar magna suscipit. Donec venenatis semper hendrerit. Cras mattis sodales viverra. Phasellus volutpat leo odio, id interdum libero venenatis quis. Nunc nec quam arcu. Cras pellentesque, felis vel suscipit sollicitudin, orci sapien placerat quam, vitae pretium purus leo id erat. Praesent blandit urna eget tortor commodo, sed pulvinar enim molestie. Fusce erat velit, gravida sed vestibulum in, consectetur at libero. Vestibulum eros mi, faucibus quis nibh sit amet, hendrerit dapibus arcu.
   </div>
</body>
</html>

Updated on: 27-Dec-2023

98 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements