CSS

🎯 CSS column-count Property

The column-count CSS property specifies how many columns the content of an HTML element should be divided into. It is commonly used to create newspaper-style, magazine-style, and multi-column layouts.

By splitting long blocks of text into multiple columns, content becomes easier to read and visually more appealing.

🔹 Why Use column-count?

Benefits
Creates professional multi-column layouts.
Improves readability for long text content.
Useful for blogs, articles, magazines, and news websites.
Works well in responsive web design.

🧩 Basic Usage

The following example divides paragraph content into three equal columns.

CSS


p {
column-count: 3;
}

🔹 column-count Values

1️⃣ number

Defines the exact number of columns that should be created.

CSS


article {
column-count: 2;
}

2️⃣ auto

Lets the browser determine the most appropriate number of columns automatically. It is often used together with column-width.

CSS


div {
column-count: auto;
}

3️⃣ initial

Resets the property to its default browser value.

CSS


div {
column-count: initial;
}

4️⃣ inherit

Inherits the column-count value from the parent element.

CSS


div {
column-count: inherit;
}

📌 Practical Example

CSS


.article-content {
column-count: 3;
column-gap: 30px;
}

This example creates a three-column article layout with a 30px gap between columns.

🧠 Summary
column-count determines how many columns content is divided into.
Multi-column layouts are ideal for articles, blogs, and magazine-style designs.
The number value directly sets the column count.
auto allows the browser to determine the best column layout.

CSS object-position

CSS column-width

CSS

CSS