CSS Property column-span

We can make elements expand across the columns with column-span in a multi-column layout,

The column-span property sets how many columns an element should span across.

Summary

Initial value: 1
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.columnSpan="all"
Animatable: no

CSS Syntax

column-span: 1|all|initial|inherit;

Property Values

1: Default value. The element should span across one column.
all: The element should span across all columns
initial: sets to default value
inherit: Inherits this property from its parent element

Browser compatibility


`column-span`	Yes	10.0	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!--from w  ww  .  jav a2s  .  co  m-->
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
</style>
</head>
<body>

<div class="newspaper">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
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 creates column with leading header.

<!DOCTYPE html>
<html>
<head>
<style>
.example {<!-- w w w. j av a 2  s  .  c o  m-->
  -webkit-columns: 125px;
  -moz-columns: 125px;
  columns: 125px;
  max-width: 300px;
  margin: 2em auto 0;
}

hr {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  margin: 1em auto;
  border-style: dashed;
  border-width: 1px 0 0;
  border-top-color: #e74c3c;
}

body {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
}

h1 {
  font-size: 7em;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0.15em;
  color: #2c3e50;
}

ul {
  list-style: square;
  margin-left: 2em;
}
</style>
</head>
<body>
<div class="example">
  <h1>A</h1>
  <ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
  </ul>
  <hr>

  <h1>B</h1>
  <ul>
    <li>b</li>
    <li>b</li>
    <li>b</li>
    <li>b</li>
    <li>b</li>
  </ul>

  <hr>
  <h1>C</h1>
  <ul>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
  </ul>  
</div>
</body>
</html>

Click to view the demo