CSS column-fill property

CSS column-fill

CSS column-fill property is used to specify how the contents are placed when they are divided.

It is used mostly with paged media.

CSS column-fill property values are

  • auto : When it is used, it is not necessary to fill the columns. It fills till is reaches the specified height, then it moves to next column.
  • balance : It fills all the columns in a same amount of data, so it may be lesser than the given height.

To support column-fill property on different browsers we need to add some prefixes, they are

  • -webkit- : It supports chrome, safari and new version of opera
  • -moz- : It support Firefox.
  • -o- : Old versions of opera.
  • -ms- : Internet explorer.

Example

Try Yourself