BlogsDope image BlogsDope

CSS column-fill

Feb. 7, 2018 CSS HTML 256

The column-fill property specifies how content is filled into columns in a multi-column layout.

CSS

column-fill: value;

If the columns are not balanced, then the last columns may be empty or partially filled. If they are balanced, then the browser distributes the content among all the columns such that the height of each column is almost same. By default, columns are balanced.

Values

balance : Content is equally divided between columns, thus making the height of all the columns almost same. The column height can't be more than the container's height. This is the default value.

auto : Each column is filled until its height becomes equal to its container's height. This may result in the last columns being empty or partially filled.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the following example, the number of columns into which the content of paragraph is to be divided is set to 3 using the column-count property and the column-fill property is set to balance (which is also the default value). This divided the entire paragraph content into the three columns equally, making the heights of all the columns nearly equal. The container element p is given a height of 740px.

Use the prefix -webkit- for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.

HTML

<p>Lorem ipsum ... lectus turpis.</p>

CSS

body {
  background-color: burlywood;
}

p {
  margin: 20px;
  padding: 10px;
  height: 740px;
  text-align: justify;
  background-color: white;
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;  
  -webkit-column-fill: balance; /* Chrome, Safari, Opera */
  -moz-column-fill: balance; /* Firefox */
  column-fill: balance;
}

See the Pen column-fill: balance by Aakhya Singh (@aakhya) on CodePen.

The screenshot of the output is shown below for a better view.

column-fill: balanceIn the above example, if the column-fill value is set to auto, then it may result in the last columns being empty or partially filled as shown in the following demo.

See the Pen column-fill: auto by Aakhya Singh (@aakhya) on CodePen.

The screenshot of the output at container height of 400px is shown below.

column-fill: auto

Note that the output will vary for different screen widths or container widths, because that leads to different column widths.

Browser Support

This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).