Javatpoint Logo
Javatpoint Logo

CSS columns

The columns property in CSS sets the number and width of columns in a single declaration. It is a shorthand property that can take several values at a time.

It is used to set both column-count and column-width properties at the same time. Both of these properties are used to control how many columns will appear. The column-count property is used to set the number of columns, whereas the column-width property specifies the width of the columns.

Together using column-count and column-width properties creates a multi-column layout that breaks automatically into a single column at narrow browser widths without using the media queries. It is not always helpful to use both of them because it can restrict the responsiveness and flexibility of the layout.

If the column-count and width don't fit in the element's width, then the browser reduces the column count automatically to fit the specified column widths.

Syntax

Values

The property values are tabulated as follows with their description.

Value Description
auto It is the default value which sets the values of column-count and column-width to the default browser values.
column-width It is used to set the minimum width for columns. However, the actual width of the column may be narrower or wider based on the available space.
column-count It specifies the maximum number of columns.
Initial It is used to set the property to its default value.
Inherit It inherits the property from its parent element.

If any of the value is omitted, then by default, the browser assumes the corresponding value to auto.

Example

In this example, we are defining two <div> elements, including text. For the first div element, the minimum width is 100px, and the maximum no. of columns can be four. Whereas for the second div element, the minimum width is 100px, and the maximum no. of columns can be six.

Output

Test it Now CSS columns




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA