Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
community creator

What is the CSS column-fill property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The column-fill property in CSSCascading Style Sheets defines how to fill the column. It balances the content equally between different columns when using a multi-column layout.

Syntax

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:

RELATED TAGS

css
community creator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring