Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to fill columns with CSS
The CSS column-fill property controls how content is distributed across multiple columns when using CSS multi-column layout. This property determines whether columns should be balanced in height or filled sequentially.
Syntax
selector {
column-fill: value;
}
Possible Values
| Value | Description |
|---|---|
balance |
Content is distributed evenly across all columns (default) |
auto |
Columns are filled sequentially, one after another |
balance-all |
Balance content across all columns including the last fragment |
Example: Balanced Column Fill
The following example demonstrates the balance value, which distributes content evenly across columns −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-fill: balance;
column-gap: 20px;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="demo">
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>
</body>
</html>
Text content is distributed evenly across four columns with equal heights, creating a balanced layout with proper spacing between columns.
Example: Auto Column Fill
This example shows the auto value, which fills columns sequentially −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-auto {
column-count: 3;
column-fill: auto;
column-gap: 20px;
height: 200px;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="demo-auto">
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>
</body>
</html>
Text fills the first column completely before moving to the second column, creating uneven column heights based on the container's fixed height.
Conclusion
The column-fill property provides control over content distribution in multi-column layouts. Use balance for even column heights or auto for sequential filling when you have a fixed container height.
Updated on: 2026-03-15T13:02:35+05:30
132 Views
Advertisements