CSS Reference

Quick Reference

The columns property is a shorthand property for the column-count and column-width properties. The column-width will define the minimum width for each column, while the column-count will define the maximum number of columns.

div {
    columns: 250px 3;
}

Default

Default valueauto auto
Inherited valuesno
Can it be animated?yes

These are the allowed values.

ValueDescription
autoSets both the column-width and column-count to "auto" (default)
column-widthDefines the minimum width for each column
column-countDefines the maximum number of columns
initialSets this property to its default value
inheritInherits this property from its parent element

Using JavaScript

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.columns = '250px 3';
<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.columns = '250px 3';
}
</script>

CSS Notes:


We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.