How to use CSS Columns

As we all know, based on the layout of the column in the CSS is very difficult to achieve. It usually involves using JavaScript or server-side processing to break the content down into different elements. This is an unnecessary complication, requiring valuable development time away from the really important things. Fortunately, this problem is now solved by using CSS column rules:

HTML :

CSS :

.demo{
    width: 500px;
    margin: 0 auto;
}

/* Creating columns is as simple as this: */

.demo p{
    -moz-columns:3;
    -webkit-columns:3;
    columns:3;
}

This rule is well supported, although it still requires a prefix. In this case, there are a few other rules that are relevant to the column, and how browsers handle corner cases.

I Hope this blog is helpfull for all.

Thanks