home

CSS3 Multiple Columns Layout

CSS3 can print layout multiple columns with paragraph texts, it would give the flexibility to create number columns, and this property has multiple column properties like:-

Column – Count: - This property specifies the number of columns divided.
Column – Gap:- This property specifies the gap between text paragraphs.
Column – Rule:- This property specifies the width and colors style rules.

Basic HTML code and Css

<div id="Multiple-colums">Add your text here</div>
<style>
#Multiple-colums{
column-count: 4;
column-gap: 30px;
column-rule: 2px outset #0000ff;
}</style>

Please go to below example codes we have all above of examples. in this code we have a div with id (Multiple-colums) and also some dummy text to create a four paragraps, in the css we have column properties for each broweser(-webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4;), also space beween the paragraphs and alos borders.

CSS3 Multiple Columns Example Demo with all properties

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS3 Multiple Columns Example code with all properties

<div id="Multiple-colums">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<style>
#Multiple-colums{
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    -webkit-column-rule: 2px outset #0000ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 2px outset #0000ff; /* Firefox */
    column-rule: 2px outset #0000ff;
}
</style>

CSS3 Multiple Columns Example code

<div id="Multiple-colums"></div>
<style>
#Multiple-colums{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
</style>

CSS3 Multiple Columns Count Example code

<div id="Multiple-colums-count"></div>
<style>
#Multiple-colums-count{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
</style>

CSS3 Multiple Columns Gap Example code

<div id="Multiple-colums-gap"></div>
<style>
#Multiple-colums-gap{
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
</style>

CSS3 Multiple Columns Ruls Example code

<div id="Multiple-colums-ruls"></div>
<style>
#Multiple-colums-ruls{
    -webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 3px outset #ff00ff; /* Firefox */
    column-rule: 3px outset #ff00ff;
}
</style>