CSS Tutorial - CSS3 Column Layout

The CSS3 multi-column layout allows us create multiple-column easily.

The following three properties are used to config column layout in CSS3.

column-count
column-gap
column-rule

Set column count


<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!--   w  w  w  .j a va2s . 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>

The code above is rendered as follows:

Set the Gap Between Columns in CSS3

The column-gap property specifies the gap between the columns:


<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!--from   w ww .j  a v  a2 s . c o  m-->
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
</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>

The code above is rendered as follows:

CSS3 Column Rules

The column-rule property sets the width, style, and color of the rule between columns.

.newspaper {
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px; 
    column-gap: 40px;
    -webkit-column-rule: 4px outset #ff00ff; 
    -moz-column-rule: 4px outset #ff00ff;
    column-rule: 4px outset #ff00ff;
}


<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!--from   www  . j ava 2s  .c o m-->
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px; 
    column-gap: 40px;
    -webkit-column-rule: 4px outset #ff00ff; 
    -moz-column-rule: 4px outset #ff00ff;
    column-rule: 4px outset #ff00ff;
}
</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

The following example uses column layout to position unordered list items.


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul {<!--from  www.  jav a 2  s  .com-->
  margin-left: 5px;
  width: 250px;
  height: 100px;
  -webkit-column-count: 2;
  -khtml-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
}

li {
  list-style: disc inside;
}
</style>
</head>
<body>
  <ul>
    <li>A</li><li>B</li><li>C</li><li>D</li>
    <li>E</li><li>F</li><li>G</li><li>H</li>
        <li>A</li><li>B</li><li>C</li><li>D</li>
    <li>E</li><li>F</li><li>G</li><li>H</li>    
  </ul>
</body>
</html>

The code above is rendered as follows:

Related Properties

Property	Description	CSS
column-count	Set the number of columns an element should have	3
column-fill	How to fill columns	3
column-gap	Set the gap between the columns	3
column-rule-color	Set the line color between columns	3
column-rule-style	Set the line style between columns	3
column-rule-width	Set the line width between columns	3
column-rule	Shorthand property for lines between columns
column-span	Set how many columns an element should span	3
column-width	Set the width of the columns	3
columns	Shorthand property for setting column-width and column-count	3