CSS Property column-count








The column-count property sets the number of columns to divide an element.

To set an exact numbers of columns when designing a multi-column layout, use column-count.

For example,

.lead {
 -webkit-column-count: 3;
    -moz-column-count: 3;
         column-count: 3;
 }

Summary

Initial value
auto
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.columnCount=3
Animatable
yes




CSS Syntax

column-count: number|auto|initial|inherit;

Property Values

number
number of columns
auto
Default value. The number of columns will be determined browser.

Browser compatibility

column-count Yes Yes Yes Yes Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!-- w ww. ja  va  2s  . co m-->
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
</style>
</head>
<body>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Ut wisi enim ad 
minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. Duis 
autem vel eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facilisis 
at vero eros et accumsan et iusto odio 
dignissim qui blandit praesent luptatum 
zzril delenit augue duis dolore te feugait 
nulla facilisi. Nam liber tempor cum soluta 
nobis eleifend option congue nihil imperdiet 
doming id quod mazim placerat facer possim 
assum. Typi non habent claritatem insitam; 
est usus legentis in iis qui facit eorum 
claritatem. Investigationes demonstraverunt 
lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>

Click to view the demo





Example 2

The following code adds icons to the top of each columns.

<!DOCTYPE html>
<html class='ng-app'>
<head>
<meta charset='UTF-8'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>
<!--from w w  w. j a  va2s  .c o  m-->
<style>
.example {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 2em 1em 0;
}

.fa {
  font-size: 3em;
  text-align: center;
  margin-bottom: 0.5em;
  display: block;
  color: #2c3e50;
}

p {
  margin-bottom: 1.5em;
  text-align: center;
}
p:first-line {
  font-variant: small-caps;
  font-size: 1.2em;
}
</style>
</head>
<body>
<div class="example">
  <i class="fa fa-mortar-board"></i>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et.</p>
  <i class="fa fa-bank"></i>
  <p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus.</p>
  <i class="fa fa-life-ring"></i>
  <p>Proin blandit, tortor quis tristique porta, nisl est rhoncus turpis, non interdum nibh ligula sit amet dolor.</p>
  <i class="fa fa-bolt"></i>
  <p>Sed sagittis aliquam nulla vel viverra. Sed at augue eros. Nam tincidunt mi eu malesuada molestie.</p>
</div>
</body></html>

Click to view the demo