Skip to main content

CSS multi-column layout

The CSS multi-column layout module lets you divide content across multiple columns. By using the properties in this module, you can define the preferred number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.

Multi-column layout in action​

In this example, the 1967 speech from Canada's centennial, A Lament for Confederation, by Chief Dan George, is displayed across multiple columns, similar to the way articles are displayed in printed newspapers. If you have JavaScript enabled, controls enable changing the preferred column number and width, the width of the gap between columns, whether the title and a sample blockquote should be contained in a single column or made to span all columns, and whether breaking within the paragraphs should be avoided.

{{EmbedGHLiveSample("css-examples/modules/multicol.html", '100%', 650)}}

To see the code for this columned layout, view the source on GitHub.

[!NOTE] Multiple-column layout is closely related to paged media. Each column box is a fragment, much like each printed page is a fragment of a document. Using the properties defined in the CSS fragmentation module, you can control how content breaks between columns and pages.

Reference​

Properties​

  • {{cssxref("break-after")}}
  • {{cssxref("break-before")}}
  • {{cssxref("break-inside")}}
  • {{cssxref("column-fill")}}
  • {{cssxref("column-gap")}}
  • {{cssxref("column-span")}}
  • {{cssxref("column-rule")}} shorthand
    • {{cssxref("column-rule-color")}}
    • {{cssxref("column-rule-style")}}
    • {{cssxref("column-rule-width")}}
  • {{cssxref("columns")}} shorthand
    • {{cssxref("column-count")}}
    • {{cssxref("column-width")}}

[!NOTE] Bear in mind that setting container height and line length can pose challenges for people with visual or cognitive disabilities. WCAG Success Criterion 1.4.8 states that even when the text size is doubled, content should not need to be scrolled.

Guides​

  • {{cssxref("orphans")}} CSS property
  • {{cssxref("widows")}} CSS property
  • {{cssxref("overflow")}} CSS property
  • {{cssxref("gap")}} CSS property
  • {{cssxref("height")}}, {{cssxref("max-height")}}, and {{cssxref("block-size")}} CSS properties
  • {{cssxref("width")}}, {{cssxref("max-width")}}, and {{cssxref("inline-size")}} CSS properties
  • {{cssxref("line-style")}} enumerated data type
  • Block formatting context guide

Specifications​

See also​