The columns property allows you to lay an element’s content in multiple columns. 5b1j1z

It is a shorthand property for setting the longhand properties: column-count.

Using columns, you can specify the number and width of columns that you want the element’s content to be laid into. You can specify values for both the column-count properties, or for only one of them. If you leave one of them out, it is set to its initial (default) value.

Setting both column-count and column-width may not always make sense, as it may restrict the flexibility and responsiveness of the layout, such as if you use absolute widths for the columns instead of percentage widths.

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.

If the width and count of columns do not fit into the width of the element, the browser will make necessary adjustments and may reduce the column count to fit the specified column widths into the element. If the column count is reduced to 1, and the column width is still wider than the element’s width, the width is also narrowed down to fit the element. If the width of the columns is small so that the entire specified number can fit and more space remains available, the browser will stretch the columns’ width in the available space.

.mag {
  columns: 12em 2;
}

            

columns: 3; /* 3 columns, their widths are "auto" which means that the browser will determine the widths based on the available space */
columns: 300px 3; /* 3 columns, each 300px wide */
columns: 25%; /* columns each 25% of the container width. Column count is determined by the browser based on the available space */