The column-width property allows you to lay an element’s content in multiple columns by specifying a column width value which the browser then uses to create a number of columns to lay the content in. 2ym5x

The exact number of columns depends on the available space, or on a specific number which you can specify using the column-count property.

Setting both column-width and column-count does not always make much sense, and it is more flexible to allow the browser to calculate the number of columns depending on the available space, thus making responsive multi-column layouts easier.

For example, the following sets the widths of the columns to ’12em’. Practically, it means that the columns will be at least ’12em’ wide, as they will be wider depending on the available space. If the available space is less than ’12em’, there will be only one column whose width is restricted to the available space.

body {
    column-width: 12em;
}
                

Laying content, like text and images, in multiple columns is usually done in print magazine layouts, and using this property, along with others, you can create a similar effect on the web.

According to the specification, The reason for making column-width somewhat flexible is to achieve scalable designs that can fit many screen sizes. To set an exact column width, the column gap (see column-gap) and the width of the multi-column element (assuming horizontal text) must also be specified.

div {
  width: 100px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}                
            

div {
  width: 40px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}