CSS3 Multiple Columns

CSS3 Multiple Columns

CSS3 has made many things simple. And one of the nicest property introduced by CSS3 is CSS3 Multiple Column. In conventional way, to make columns in web page, we have to make that much number of div’s and css classes in stylesheet. But by using this CSS3 multiple columns property, you just have to write 2-3 lines in your stylesheet and you are done!

For example,

<div class="columns">
<p>
Vivamus orci tortor, placerat sed molestie id, condimentum eget mauris.
Pellentesque iaculis laoreet tortor, vel rhoncus quam pharetra vitae.
Sed accumsan pretium ipsum, non luctus lacus ultrices nec. Sed in elit orci,
in varius mauris. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Pellentesque aliquet sagittis massa quis
mollis. In et quam odio. Integer dignissim malesuada urna eget cursus.
Nunc non ipsum sit amet sem luctus bibendum quis id mauris. Aenean
adipiscing dictum felis, eu pellentesque neque convallis et. Suspendisse
potenti. Donec sapien massa, dapibus id scelerisque nec, dignissim sit amet
leo. Phasellus gravida nisl nec orci commodo lacinia. Proin ornare nibh a
lacus hendrerit id posuere ligula feugiat. Integer ac augue neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nulla
</p>
</div>

and to fit the above long text in number of columns, we will add CSS3 multiple column property to the class .columns

Column Count Property

.columns {
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}

we just simply mentioned the number of column count as 4 and it will split the text in four columns. Change the count and you will have that number of columns in your div.

There are some other properties which are related to this CSS3 multiple columns property, which are

Column Gap Property

There is one another property to add gap or say distance between two columns

.columns {
-moz-column-gap:20px; /* Firefox */
 -webkit-column-gap:20px; /* Safari and Chrome */
 column-gap:20px;
}

Column Rules Property

This property will help you to draw a line in between two columns

-moz-column-rule:2px outset #ccc; /* Firefox */
 -webkit-column-rule:2px outset #ccc; /* Safari and Chrome */
 column-rule:2px outset #ccc;

Check out the live demo and play with the snippet,

Play

Hope you will use this snippet in your next project if you need. If you’ve enjoyed reading this post, be sure to join us on Socials.
Source: w3schools

Tags css3, featured, snippets