CSS

🎯 CSS column-width Property

The column-width CSS property defines the ideal width of each column in a multi-column layout. It helps browsers determine how content should be distributed across multiple columns.

Instead of specifying an exact number of columns, you define the preferred width of each column and allow the browser to calculate how many columns can fit within the available space.

🔹 Why Use column-width?

Benefits
Creates flexible and responsive column layouts.
Improves readability for long-form content.
Allows the browser to automatically optimize column distribution.
Frequently used in magazines, blogs, articles, and news websites.

🧩 Basic Usage

The following example sets the preferred column width to 200 pixels.

CSS


article {
column-width: 200px;
}

The browser automatically calculates how many 200px-wide columns can fit inside the container.

🔹 column-width Values

1️⃣ auto

Allows the browser to determine the column width automatically.

CSS


div {
column-width: auto;
}

2️⃣ length

Defines the preferred column width using units such as px, em, rem, or percentage values.

CSS


div {
column-width: 250px;
}

3️⃣ initial

Resets the property to its default browser value.

CSS


div {
column-width: initial;
}

4️⃣ inherit

Inherits the column-width value from the parent element.

CSS


div {
column-width: inherit;
}

📌 column-count vs column-width

The column-count and column-width properties work together to create flexible multi-column layouts.

column-count → Defines how many columns should be created.
column-width → Defines the ideal width of each column.
The browser evaluates both values and generates the final layout automatically.

💡 Practical Example

CSS


.article-content {
column-width: 250px;
column-gap: 30px;
}

This example creates responsive columns with an ideal width of 250px and a 30px gap between them.

🧠 Summary
column-width specifies the preferred width of columns.
The browser calculates the number of columns automatically.
Commonly used in responsive multi-column layouts.
Works especially well together with column-count and column-gap.

CSS column-count

CSS columns

CSS

CSS