Published on: 14 May, 2014

CSS3 Multiple Column

Posted by andy | 1303 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

Do you need to create a news article layout with 2-4 columns? Well, it is now so easy, you no need to use table tag or div with float property, CSS3 now support multiple column to enable you to create this. There are only 2 property you need to include in your css which is column-count and column-gap.

1. column-count

column-count property is used to divide a content into a number of specified column.

2. column-gap

column-gap property specifies the gap width between each column.

Example of on how to use multiple column in css3
Tikoan ultrico sito ratrum lorit neci pesetaie ameto sito turipo haoti gulao facilisoe idu pele sito velo orai nequex ultri tuxi liebeo conviluis gravido keumen ete ut moriol sotpio carai geio menai convalit turipi sagita ruti pras donio ani congi mekuai plato sondue solicto vali timon molie tismaei dea lacui nune hatibo nulai nequi enterdum mauri palvinor menecoi diami ameito egeto duo sapio semperi telei timoi palti mauriz dulia gujial ursiue estelio loroi nisio risusu Telei sito in nisio lopiun curio gujial feloxi sondue uto sapio fremen inim sotpio diami goi menai tikoan loroi sedoi nulai ticoduy aeni pesetaie nuni tuxi eto pele ememper solicto enterdum etui vezi nibhue eua a nuni dignisa orai gulao nune lorit conviluis nequi dulia telli geio duiso dera sito ete uria pras gravidue fringala iaculo scelerisu ultri ameto risusu ut hacio molie gulio ina egetsi ursiue dicti sito scelosqui ani nequel timon liebeo dea convalit sub welz pharetu adipi vali ameto vuliputu sipoi ameito moriol carai masie dapibu nequex tismaei eupa atic turipi erati malesudi inhac valio frinuilo sito mauri palti egeto augue mauriz ratrum palvinor velio velizu sceleris Aeni facilisoe gulao keumen scelerisu loi nequi dapibu egeto erati valio vuliputu velo sipoi telei tikoan sondue goi pharetu masie molie nequel sito impero nisio vali inim nuni moriol dalis gujial nulai nibhue eua liebeo famera ruti adipi menecoi comodi pele dignisa acio didaminia sito eua duiso ultri ani lorit pesetaie risusu turipo velpt buis hatibo vezi uto conviluis carai sito curiosue duo velo nuni at haoti aiculi palti ticoduy nune ultrico sotpio menai ete dicti sedoi vitael egetsi tismaei mauri etui velizu frinuilo semperi lacui plato malesudi feloxi quam

 

This is the css3 code. The webkit and moz extension is used to support older browser version.

<style type="text/css">
.example{
	column-count: 4;
	column-gap: 20px;
	-webkit-column-count: 4;
	-webkit-column-gap: 20px;
	-moz-column-count: 4;
	-moz-column-gap: 20px;
}
</style>

CSS3 Multiple Column Generator

Alternatively, you can see our interactive demo by using our CSS3 Multiple Column Generator.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.