CSS Multi-Column Layout: Theory & Interactive Examples

What is CSS Multi-Column Layout?

The CSS multi-column layout module allows you to flow content into multiple columns, similar to newspapers or magazines. It is useful for improving readability, making better use of horizontal space, and creating visually engaging layouts.

column-count: Number of columns
column-gap: Space between columns
column-rule: Line between columns (shorthand for style, width, color)
column-width: Ideal width of each column
column-span: Make an element span across all columns
columns: Shorthand for column-width and column-count

Columns are responsive and will adjust based on available space and the properties you set.

Interactive Examples

Basic Multi-Column Layout (`column-count`)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisi eu velit. Suspendisse potenti. Etiam euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisi eu velit.

.columns-count {
  column-count: 3;
}

Column Gap (`column-gap`)

.columns-gap {
  column-count: 3;
  column-gap: 2.5em;
}

Column Rule (`column-rule`)

.columns-rule {
  column-count: 3;
  column-rule: 3px dashed #8e44ad;
}

Column Width (`column-width`)

.columns-width {
  column-width: 180px;
}

Column Span (`column-span`)

This heading spans all columns

.columns-span {
  column-count: 3;
}
.span-all {
  column-span: all;
}

Columns Shorthand (`columns`)

.columns-shorthand {
  columns: 180px 3;
}

Best Practices & Accessibility

Use multi-column layout for text-heavy content to improve readability.
Test column layouts on different screen sizes for responsiveness.
Use column-span for headings or elements that should stretch across all columns.
Be cautious with interactive elements (forms, buttons) inside columns—they may break across columns.
Combine with other layout techniques (Flexbox, Grid) for advanced designs.

← Back to Home

What is CSS Multi-Column Layout?

Interactive Examples

Basic Multi-Column Layout (column-count)

Column Gap (column-gap)

Column Rule (column-rule)

Column Width (column-width)

Column Span (column-span)