Article Categories

Selected Reading

How to set column width and column count with JavaScript?

Javascript Web Development Front End Scripts

To set the column width and column count in a single declaration, use the JavaScript columns property. This CSS property is a shorthand that combines column-width and column-count into one convenient declaration.

Syntax

element.style.columns = "width count";
// or
element.style.columns = "width";
element.style.columns = "count";

Parameters

width - Minimum width of each column (e.g., "100px", "10em")
count - Number of columns (e.g., 2, 3, 4)

Example

The following example demonstrates how to change column layout dynamically using JavaScript:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px solid yellow;
            column-gap: 20px;
         }
      </style>
   </head>
   <body>
      <p>Click below to change the column count to 2 and set minimum width to 70px</p>
      <button onclick="changeColumns()">Change Column Layout</button>
      <button onclick="resetColumns()">Reset Layout</button>
      <div id="myID">
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
      </div>
      <script>
         function changeColumns() {
            document.getElementById("myID").style.columns = "70px 2";
         }
         
         function resetColumns() {
            document.getElementById("myID").style.columns = "auto 4";
         }
      </script>
   </body>
</html>

Different Column Configurations

<!DOCTYPE html>
<html>
   <head>
      <style>
         .content {
            column-rule: 2px solid #ccc;
            column-gap: 15px;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <button onclick="setThreeColumns()">3 Columns</button>
      <button onclick="setMinWidth()">Minimum Width 100px</button>
      <button onclick="setCombined()">2 Columns + 150px Width</button>
      
      <div id="content" class="content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod 
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur.
      </div>
      
      <script>
         function setThreeColumns() {
            document.getElementById("content").style.columns = "3";
         }
         
         function setMinWidth() {
            document.getElementById("content").style.columns = "100px";
         }
         
         function setCombined() {
            document.getElementById("content").style.columns = "150px 2";
         }
      </script>
   </body>
</html>

Key Points

The columns property accepts both width and count values
Width acts as a minimum - actual columns may be wider if needed
Browser automatically balances content across columns
Use column-rule and column-gap for better visual separation

Conclusion

The JavaScript columns property provides a convenient way to control multi-column layouts dynamically. You can specify column count, minimum width, or both to create responsive column designs.

Vikyath Ram

Updated on: 2026-03-15T23:18:59+05:30

811 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next