column-count Property

The first thing you have to do to be able to arrange a column layout is to set the number of columns to display. This is handled using the column-count property. This property takes one of three values: a numeric value, auto and inherit. The numeric value allows you to set a specific number of columns to be displayed. The auto value leaves the browser to determine how many columns are to be displayed, and is used in conjunction with the values present for the column-width and column-gap properties. The inherit value takes on whatever parent value for column-count may already be present. Not surprisingly, the default value for column-count is 1, which equates the width of the browser window to a column.

The following code fragment shows how you could set three columns to a div element: