Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set or return the number of columns an element should be divided into with JavaScript?

Javascript Web Development Front End Scripts

In JavaScript, the columnCount property allows you to divide an element's content into multiple columns. This CSS property can be set and retrieved using JavaScript's style object.

Syntax

// Set column count
element.style.columnCount = "number";

// Get column count
let count = element.style.columnCount;

Parameters

The columnCount property accepts:

  • number - The number of columns (e.g., "2", "3", "4")
  • "auto" - Browser determines column count automatically
  • "initial" - Sets to default value

Example: Setting Column Count

Click the button to divide the text into 4 columns:

<!DOCTYPE html>
<html>
<body>
  <p>Click below to create 4 columns</p>
  <button onclick="display()">Create Columns</button>
  <div id="myID" style="width: 500px; padding: 10px;">
    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 display() {
      document.getElementById("myID").style.columnCount = "4";
      document.getElementById("myID").style.columnGap = "20px";
    }
  </script>
</body>
</html>

Example: Getting Column Count

<!DOCTYPE html>
<html>
<body>
  <div id="textDiv" style="column-count: 3; width: 400px;">
    Sample text content that will be divided into columns automatically.
    Sample text content that will be divided into columns automatically.
    Sample text content that will be divided into columns automatically.
  </div>
  
  <button onclick="getColumnCount()">Get Column Count</button>
  <p id="result"></p>

  <script>
    function getColumnCount() {
      let element = document.getElementById("textDiv");
      let count = window.getComputedStyle(element).columnCount;
      document.getElementById("result").innerHTML = "Column count: " + count;
    }
  </script>
</body>
</html>

Key Points

  • Use getComputedStyle() to get the actual column count, including CSS-set values
  • The columnGap property controls spacing between columns
  • Column layout is responsive and adjusts to container width
  • Not all browsers support CSS columns equally well

Browser Compatibility

CSS columns are supported in modern browsers. Use vendor prefixes for older browsers:

element.style.webkitColumnCount = "3";  // Webkit browsers
element.style.mozColumnCount = "3";     // Firefox
element.style.columnCount = "3";        // Standard

Conclusion

The columnCount property provides an easy way to create newspaper-style columns in web content. Use element.style.columnCount to set columns and getComputedStyle() to retrieve the current value.

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

207 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements