Column Width Property is used to assign the width for the column. If you want fix the size of the column. If you don’t assign the column width its will take the auto value of that particular container. And it take the how many column count you assigned it will take the equal value for the individual column.
Syntax:
.clom{ -webkit-column-width:100px; -moz-column-width:100px; column-width:100px;; }Example Code:
CSS:
.clum { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; } .clum p{ -webkit-column-width:100px; -moz-column-width:100px; column-width:100px; }
HTML:
<div class="clum"> <p>Column Count used to give the value for number column will present in the page</p> <p>Column Count used to give the value for number column will present in the page</p> <p>Column Count used to give the value for number column will present in the page</p> </div>
Preview:
Column Count used to give the value for number column will present in the page
Column Count used to give the value for number column will present in the page
Column Count used to give the value for number column will present in the page
Feature | Chrome | Firefox | IE | Opera | Safari | Android | IOS |
---|---|---|---|---|---|---|---|
Basic support | Any Version | 1.5+ | 10+ | 11.1+ | 3+ | 2.3+ | 6.1+ |