Teach with us

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. It is set as −

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

Example

Let us see an example to set the column count −

 Live Demo

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

Output

Example

Let us now see another example −

 Live Demo

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

Output

Updated on 30-Dec-2019 09:51:09

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements