CSS

🎯 CSS column-fill Property

The column-fill CSS property controls how content is distributed across columns in a multi-column layout. It determines whether the browser should balance content evenly between columns or fill each column sequentially.

This property is particularly useful when working with long articles, magazine-style layouts, newspapers, and other content that spans multiple columns.

🔹 Why Use column-fill?

Benefits
Controls how content is distributed across columns.
Helps create balanced newspaper-style layouts.
Improves the visual appearance of multi-column content.
Provides greater control over column behavior.

🧩 Basic Usage

The following example distributes content evenly between columns.

CSS


.article {
    column-count: 3;
    column-fill: balance;
}

🔹 column-fill Values

1️⃣ balance

Distributes content as evenly as possible across all columns. The browser attempts to keep column heights balanced for a cleaner and more professional layout.

CSS


div {
    column-fill: balance;
}

This behavior is commonly seen in newspapers and magazine layouts where column heights appear nearly equal.

2️⃣ auto

Fills columns sequentially. The browser fills the first column before moving to the next one, which may result in uneven column heights.

CSS


div {
    column-fill: auto;
}

This value is useful when content flow is more important than maintaining balanced column heights.

3️⃣ initial

Resets the property to its default browser value.

CSS


div {
    column-fill: initial;
}

4️⃣ inherit

Inherits the column-fill value from the parent element.

CSS


div {
    column-fill: inherit;
}

📌 balance vs auto

balance → Distributes content evenly between columns.
auto → Fills columns one by one based on content flow.
balance is ideal for visual consistency.
auto is useful when preserving content order is the priority.

💡 Practical Example

CSS


.news-content {
    column-count: 3;
    column-gap: 30px;
    column-fill: balance;
}

This example creates a three-column layout with evenly distributed content and a 30px gap between columns.

🧠 Summary
column-fill controls how content is distributed in multi-column layouts.
balance creates evenly sized columns.
auto fills columns sequentially.
Frequently used together with column-count, column-width, and columns properties.

CSS columns

CSS column-span

CSS

CSS