Column Fill Property is used to fill the content equally in the column. If you assign the height to the column it will fill the content up to that particular height and remain content will fill in the next column. This property only available in the Firefox browser.
CSS Column Fill property has the two value one is balanced and the next one is auto.
Balance value is used to fill the content equally in the each column. It will not grow the column height. And it will have some space below the each column. Because of filling the content equally in the each column.
Auto value fills the content to the how much height given. After reaching the height is will go to next column.
Syntax:
.clum{
-webkit-column-fill:balance;
-moz-column-fill:balance;
Column-fill:balance;
}Example Code:
CSS:
.clum {
-webkit-columns: 4;
-moz-columns: 4;
columns: 4;
height: 170px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0.5em;
}
.balance {
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
margin-bottom: 1em;
}
.auto{
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
}
HTML:
<div class="clum balance"> <p>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. </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.
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+ |
