CSS columns Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 25 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The columns property in CSS is a shorthand property that allows web developers to set the number and width of columns for an element.

This property is particularly useful for creating multi-column layouts, which can enhance the readability and aesthetics of your content.

💡 Syntax

The syntax for the columns property combines the column width and the number of columns.

Syntax

Copied

element {
  columns: column-width column-count;
}

🎛️ Default Value

The default value for the columns property is auto auto, which means the browser will automatically determine the width and number of columns based on the content and available space.

🏠 Property Values

Value	Description
column-width	Specifies the ideal width of each column. Can be any valid length value (e.g., px, em, %, etc.).
column-count	Specifies the number of columns. Must be a positive integer.

📄 Example

In this example, we'll create a three-column layout with each column being 200 pixels wide.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS columns Example</title>
  <style>
    .multicolumn {
      columns: 200px 3;
    }
  </style>
</head>
<body>
  <h1>Multi-Column Layout</h1>
  <div class="multicolumn">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel.</p>
    <p>Ut sit amet massa bibendum, scelerisque velit eu, sodales libero. Maecenas semper lacus nec ligula tincidunt, vitae iaculis nisi faucibus. Sed facilisis suscipit odio, et euismod sapien tincidunt vel.</p>
    <p>Integer convallis libero et ligula ultricies, a bibendum lacus posuere. Vivamus ullamcorper vehicula massa, a efficitur turpis tincidunt vel. Integer eu mauris enim.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The columns property is widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. As with any CSS property, it is advisable to test your design across different browsers to ensure consistent behavior.

🎉 Conclusion

The columns property is a powerful and convenient way to create multi-column layouts in your web design.

By specifying the width and number of columns, you can easily control the flow and appearance of your content. Experiment with different configurations to find the best layout for your content and enhance the user experience on your website.