The **`column-fill` property** in #key# CSS: Cascading Style Sheets #key# defines how to fill the column. It balances the content equally between different columns when using a multi-column layout. 

# 
## Syntax
```css
column-fill: balance|auto|initial|inherit;
```

## Property values

- **`auto:`** It specifies that all the columns should be filled sequentially until the column reaches its height. 

- **`balance:`** It is the default value. It specifies or determines that content should be balanced between the columns, if possible. 


- **`initial:`** This sets the value to its default value.

- **`inherit:`**  ﻿This inherits the column fill property from its parent value.

## Code

The example below demonstrates the use of the column-fill property. We use the column-fill property to define the column to be balanced:

<title>Example</title>

<div class="col">
  <p>  Welcome To Educative Edpresso Shots. It is a platform where you can learn different types of programming skills.</p>
  <p>You can go through different shots which are based on different programming languages to enhance your skills.</p>
</div>

.col {
  background-color: sky blue;
  padding: 20px;

  column-count: 3; 
  column-rule: 5px dotted red;
  column-fill: balance;
}

codemirror

What is the CSS column-fill property?

Defines how to distribute content in columns, balancing it equally or filling sequentially.