CSS column-fill Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The column-fill property in CSS is used to control how content is distributed across columns in a multi-column layout. It determines whether the columns are balanced so that they are of approximately equal height, or whether they are filled sequentially, one after the other.

This property is particularly useful when creating layouts with multiple columns to ensure the content flows as desired.

💡 Syntax

The syntax for the column-fill property is straightforward. It can be applied to any element that supports multi-column layout.

Syntax

Copied

element {
  column-fill: balance | auto;
}

🎛️ Default Value

The default value of the column-fill property is balance.

🏠 Property Values

Value	Description
balance	This value tries to distribute the content evenly across the columns so that they are of approximately equal height.
auto	This value fills each column sequentially, one after the other, which may result in columns of varying heights.

📄 Example

In this example, we'll see how the column-fill property works when set to balance and auto.

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 column-fill Example</title>
  <style>
    .columns {
      column-count: 3;
      column-gap: 20px;
      height: 200px;
      border: 1px solid #000;
    }
    .balance {
      column-fill: balance;
    }
    .auto {
      column-fill: auto;
    }
  </style>
</head>
<body>
  <h1>CSS column-fill Property</h1>
  <h2>Balance</h2>
  <div class="columns balance">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus.</p>
    <p>Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam.</p>
    <p>Aliquam euismod, orci vel semper venenatis, mauris ligula consequat purus, non scelerisque magna quam quis elit.</p>
  </div>
  
  <h2>Auto</h2>
  <div class="columns auto">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus.</p>
    <p>Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam.</p>
    <p>Aliquam euismod, orci vel semper venenatis, mauris ligula consequat purus, non scelerisque magna quam quis elit.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The column-fill property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The column-fill property is a useful tool for web developers looking to control the distribution of content in multi-column layouts.

By using this property, you can choose whether to balance the content evenly across columns or fill each column sequentially. This helps in creating visually appealing and well-structured layouts that enhance the user experience. Experiment with different values and see how this property can enhance your web projects.