YouTip

## CSS3 `columns` Property The CSS3 `columns` property is a shorthand property used to set both the width and the number of columns in a multi-column layout. By using this property, you can easily flow text and other content into multiple adjacent columns, similar to a newspaper layout. --- ## Introduction and Usage The `columns` property is a shorthand for: * `column-width`: Specifies the minimum or ideal width of each column. * `column-count`: Specifies the maximum number of columns to display. By combining these two properties, the browser automatically calculates the optimal layout based on the available viewport width. If the container is too narrow to fit the specified number of columns at the specified minimum width, the browser will automatically reduce the number of columns. --- ## Browser Support The numbers in the table specify the first browser version that fully supports the property. Numbers followed by `-webkit-`, `-moz-`, or `-ms-` specify the first version that supported the property with a vendor prefix. | Property | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **columns** | 50.0
4.0 `-webkit-` | 10.0 | 9.0 `-moz-` | 9.0
3.1 `-webkit-` | 37.0
15.0 `-webkit-`
11.1 | --- ## Syntax ```css columns: column-width column-count; ``` ### Property Values | Value | Description | | :--- | :--- | | `column-width` | Sets the minimum/ideal width of the columns (e.g., `100px`, `15em`, `auto`). | | `column-count` | Sets the maximum number of columns the element should be divided into (e.g., `3`, `auto`). | ### Specifications * **Default Value:** `auto auto` * **Inherited:** No * **CSS Version:** CSS3 * **JavaScript Syntax:** `object.style.columns="100px 3"` --- ## Code Examples ### Example 1: Setting Column Width and Count This example sets the minimum column width to `100px` and the maximum column count to `3`. ```css div { columns: 100px 3; -webkit-columns: 100px 3; /* Safari and Chrome */ -moz-columns: 100px 3; /* Firefox */ } ``` ### Example 2: Responsive Multi-Column Layout In this example, the browser will create columns that are at least `250px` wide. It will fit as many columns as possible within the parent container, up to a maximum of `4` columns. ```css .article-container { columns: 250px 4; column-gap: 30px; /* Sets the space between columns */ } ``` --- ## Related Properties To further customize your multi-column layouts, you can use the following related properties: * **`column-gap`**: Specifies the gap (space) between the columns. ```css div { column-gap: 30px; } ``` * **`column-rule`**: A shorthand property that sets a vertical line (rule) between columns. It acts like a border between columns and takes `width`, `style`, and `color`. ```css div { column-rule: 1px solid #ccc; } ``` * **`column-span`**: Specifies how many columns an element (like a heading) should span across. ```css h2 { column-span: all; /* Spans across all columns */ } ```