CSS Property columns








The columns property is a shorthand property for setting column-width and column-count.

The columns property will accept column-count, column-width, or both properties.

For example,

.intro {
-webkit-columns: 300px 2;
   -moz-columns: 300px 2;
        columns: 300px 2;
}

Summary

Initial value
auto auto
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.columns="100px 3"
Animatable
yes




CSS Syntax

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

Property Values

auto
Default value. Sets both the column-width to "auto" and the column-count to "auto"
column-width
width of the columns
column-count
number of columns
initial
sets to default value
inherit
Inherits this property from its parent element

Browser compatibility

columns Yes 10.0 Yes Yes Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!--from   www .  ja v a  2s .  co  m-->
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 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 header to column layout.

<!DOCTYPE html>
<html>
<style>
.example {<!--   ww w  . ja  v a2  s.  co m-->
  -webkit-columns: 4 150px;
  -moz-columns: 4 150px;
  columns: 4 150px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
}

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

h1 {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  font-size: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

.lead {
  font-variant: small-caps;
  font-size: 1.3em;
  text-align: left;
  font-style: italic;
}
</style>
</head>
<body>
<div class="example">
  <h1>Sed dignissim lacinia nunc</h1>
  <p class="lead">Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.
  Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.
  Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.
  </p>
  <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>
  <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>
  <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
</div>
</body>
</html>

Click to view the demo

Example 3

We can use multi-column layout on block elements including lists to make a navigation bar. 

<!DOCTYPE html>
<html>
<style>
.nav {<!--   www  .j  a v a 2s.co m-->
  background: #2c3e50;
  -webkit-columns: 100px 4;
  -moz-columns: 100px 4;
  columns: 100px 4;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  -webkit-column-rule: 1px solid #1a242f;
  -moz-column-rule: 1px solid #1a242f;
  column-rule: 1px solid #1a242f;
}

.nav a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1em;
  text-align: center;
  border-bottom: 1px solid #1a242f;
}
.nav a:hover {
  background: #1a242f;
}

body {
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
}
</style>
</head>
<body>
<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</body>
</html>

Click to view the demo