A Detailed Guide to CSS Multi-column Layout

Multi-column layout is a CSS technique that automatically splits content into multiple columns for display. It is commonly used in news, magazine, and similar layout scenarios to create a more compact and readable content distribution.

1. Basic Concepts
Multi-column layout is controlled by column-count (number of columns) and column-width (column width). The browser automatically adjusts the number of columns or column width based on the container size. For example:

.container {
  column-count: 3; /* Fixed 3 columns */
  column-width: 200px; /* Minimum width of 200px per column */
}

The actual effect depends on the container width: If the container is 600px wide, column-width:200px might generate 3 columns (600/200≈3), while column-count:3 would force 3 columns (potentially compressing column width).

2. Core Properties Explained

• Column Count and Width:

  • column-count: auto|number: Specifies the maximum number of columns. auto means determined by other properties.
  • column-width: auto|length: Specifies the ideal column width. The actual width may be larger (when space is ample) or smaller (when space is insufficient).
  • Typically used together (e.g., column-count:4; column-width:100px). The browser prioritizes the column width constraint, then adjusts based on the column count.

• Column Gap and Rule (Divider):

  .container {
    column-gap: 40px; /* Column gap, default is 1em */
    column-rule: 2px solid #ccc; /* Divider line (similar to border) */
  }
  

  column-rule is shorthand for column-rule-width, column-rule-style, column-rule-color.

3. Controlling Content Flow

• Column Balancing:

  .container {
    column-fill: balance; /* Default, balances column heights */
    column-fill: auto; /* Fills sequentially, potentially leaving the last column shorter */
  }
  

  Note: column-fill only takes effect when a height is specified.

• Preventing Elements from Spanning Columns:

  h2 {
    break-inside: avoid; /* Prevents headings from breaking across columns */
    column-span: none; /* Default, element stays within one column */
  }
  

  break-inside can also be set to avoid-page (avoid page breaks when printing) or avoid-column (avoid column breaks).

• Elements Spanning Multiple Columns:

  .full-width {
    column-span: all; /* Spans all columns (e.g., for a title) */
  }
  

  An element with column-span: all breaks out of the column flow and occupies its own full-width row.

4. Practical Application Example

<div class="news-article">
  <h2 class="title">News Headline</h2>
  <p>Paragraph 1 content...</p>
  <img src="pic.jpg" alt="Illustration">
  <p>Paragraph 2 content...</p>
</div>

.news-article {
  column-count: 3;
  column-gap: 30px;
  column-rule: 1px dashed #999;
}
.title {
  column-span: all; /* Headline spans all three columns */
  text-align: center;
}
img {
  break-inside: avoid; /* Prevents images from breaking across columns */
  width: 100%;
}

5. Notes

• Browser Compatibility: Widely supported in modern browsers, but may require prefixes (e.g., -webkit-column-count) for older versions.
• Height Limitation: Multi-column layouts often require an explicit container height; otherwise, balancing column heights might fail.
• Interaction Issues: After content is split into columns, scrolling behavior might not be as expected (content may not scroll continuously between columns during vertical scrolling).

By configuring multi-column properties appropriately, magazine-style layouts can be easily achieved, enhancing text readability and visual appeal.