Revisiting CSS Multi-Column Layout

Nearly two decades have passed since my first book, Transcending CSS, explored the then-novel Multi-Column Layout module. An updated, freely available online version, Transcending CSS Revisited, offers a contemporary perspective. My background in print likely fueled my initial enthusiasm for this CSS feature, enabling columnar content without superfluous markup. Despite its consistent use in my work, CSS Columns remains surprisingly underutilized. Why?

Specification Gaps

Multi-Column Layout has long suffered from, and continues to have, significant limitations. As Rachel Andrew (now a specification editor) highlighted five years ago: direct styling of individual column boxes isn't possible; JavaScript manipulation or adjustments to background, padding, and margins are unavailable; and all columns remain uniformly sized. Only column rules offer styling options.

This remains true. Selective styling, such as alternating background colors using :nth-column(), is impossible. While column rules allow for border-style variations (dashed, dotted, solid, groove, ridge), the absence of border-image support is puzzling, given their near-simultaneous introduction. These imperfections exist, but they don't fully explain the widespread neglect of this valuable tool.

Historical Browser Inconsistencies

Older browsers often ignored unsupported column properties. However, the early adoption of Multi-Column Layout coincided with a period where cross-browser consistency wasn't a paramount concern for many developers. While initial browser support was inconsistent, particularly regarding content breaks, modern browsers now offer widespread compatibility. Yet, the perception of CSS Columns as "broken" persists among developers I've spoken with. While improvements are needed, this shouldn't hinder the use of its currently functional aspects.

Readability and Scrolling Concerns

The underutilization of Multi-Column Layout might stem not from specification flaws or implementation issues, but from usability challenges. Rachel Andrew correctly pointed out the potential for poor readability due to excessive vertical scrolling in long-form content. This is undeniably a negative reading experience.

Careful consideration is crucial, but this shouldn't be a deterrent. Poor design choices, such as inappropriately applying columns to large amounts of text without structural elements, are the true culprits. Headings, images, and quotes can effectively span columns, improving readability. Combined with container queries and modern text sizing units, there's little reason to avoid Multi-Column Layout.

A Quick Review of Properties and Values

Two primary methods exist for creating columns: specifying the column-count or defining the column-width, letting the browser determine the column count. I prefer column-width, setting a width (e.g., 18rem) and letting the browser optimize the number of columns.

The column-gap (gutter) controls spacing between columns, ideally using rem units for text size proportionality. The column-rule adds visual separation with customizable thickness and border-style. This straightforward syntax contributes to its ease of use.

Enhanced Relevance in Modern CSS

At the time of Transcending CSS, many modern CSS features were absent: rem and viewport units, advanced selectors like :has(), container queries, media queries for responsive design, calc(), clamp(), CSS Grid, and Flexbox. These advancements enhance Multi-Column Layout's capabilities.

rem and viewport units, coupled with calc() and clamp(), enable responsive text sizing within columns. :has() allows conditional column creation based on content. Container queries enable column implementation only when sufficient container space is available. Integration with CSS Grid or Flexbox unlocks even more creative layouts.

Practical Application: A Responsive Article Layout

My challenge was creating a flexible, media-query-free article layout adapting to screen size and the presence/absence of a <figure></figure>. Columnar text improves readability, with text size adjusting to container width, not viewport width.

The HTML is simple: a <main></main> element containing a heading and paragraphs, and optionally a <figure></figure>.

<main><h1>About Patty</h1>
<p>…</p></main><img  alt="Revisiting CSS Multi-Column Layout" >

Multi-Column Layout styles are applied to <main></main> using column-width (40ch), max-width (100ch), and automatic margins for centering:

main {
  margin-inline: auto;
  max-width: 100ch;
  column-width: 40ch;
  column-gap: 3rem;
  column-rule: .5px solid #98838F;
}

Flexbox is applied to <section></section> only if it contains a <figure></figure>:

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}

min-width: min(100%, 30rem) ensures responsiveness for both <main></main> and <figure></figure>:

section:has(> figure) main {
  flex: 1;
  margin-inline: 0;
  min-width: min(100%, 30rem);
}

section:has(> figure) figure {
  flex: 4;
  min-width: min(100%, 30rem);
}

This eliminates the need for media queries. Text size adapts using container queries (container-type: inline-size;) and clamp() for responsive scaling:

h1 { font-size: clamp(5.6526rem, 5.4068rem + 1.2288cqi, 6.3592rem); }
h2 { font-size: clamp(1.9994rem, 1.9125rem + 0.4347cqi, 2.2493rem); }
p { font-size: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem); }

The result is a flexible layout adapting to screen size and content, utilizing Multi-Column Layout effectively.

Addressing Past Limitations

Many articles highlight Multi-Column Layout's flaws, particularly scrolling issues. The column-span property (for headings, images, quotes to span columns) significantly mitigates this, along with careful content design to minimize excessive scrolling.

Orphaned headings and figures are addressed using break-after: column;.

A Renewed Perspective on Multi-Column Layout

Despite its age and past limitations, Multi-Column Layout remains underutilized. While challenges exist, its value and ability to enhance design remain. It's time for a fresh look at this powerful CSS tool.

The above is the detailed content of Revisiting CSS Multi-Column Layout. For more information, please follow other related articles on the PHP Chinese website!