CSS Column Generator

CSS multi-column layout is a module that allows content to flow automatically across multiple vertical columns, similar to a newspaper or magazine. You define the structure - number of columns, column width, and gaps - and the browser distributes the content, reflowing it as the viewport or font size changes. It is best suited to long-form reading content like articles and documentation, where shorter line lengths improve readability.

column-count sets a fixed number of columns regardless of screen width - if you set three columns, you always get three, no matter how wide or narrow the container. column-width sets an ideal minimum width for each column and lets the browser calculate how many columns fit - making the layout responsive automatically. When both are set together, column-count acts as a maximum and column-width acts as a minimum, so the browser never exceeds the count but also never creates columns narrower than the specified width.

Use the column-rule shorthand property, which works exactly like border - it accepts a width, a style, and a colour. For example: column-rule: 1px solid #ccc;. The rule is drawn in the centre of the column gap and does not take up any space, so it has no effect on column widths or layout. If the column-gap is too narrow relative to the rule width, the rule may overlap the column content.

column-fill controls how content is distributed across columns. balance (the default) attempts to make all columns roughly equal in height. auto fills each column from top to bottom before moving to the next, which can leave trailing columns empty. balance-all is similar to balance but also applies to the last column group - browser support for this value is more limited than the others.

Apply column-span: all; to the element you want to stretch across the full width of the multi-column container. This is typically used for headings that should sit above all columns rather than being confined to a single one. Setting column-span: none; (the default) keeps the element within its own column. Note that only none and all are valid values - there is no way to span a specific number of columns using this property.

orphans sets the minimum number of lines of text that must remain at the bottom of a column before a column break. widows sets the minimum number of lines that must appear at the top of a column after a break. Both default to 2. Higher values reduce isolated single lines - a common typographic problem - but give the browser less flexibility when balancing column heights. These properties apply to column breaks in the same way they apply to page breaks in print stylesheets.

CSS multi-column layout is content-driven: you describe the column structure and the browser flows the content automatically from one column to the next. CSS Grid is placement-driven: you define explicit rows and columns and then position each item precisely within the grid. Multi-column is better for continuous flowing text - articles, documentation, lists - where the order matters and content just needs to wrap. Grid is better for UI layouts where discrete components need to be positioned independently of one another.

CSS multi-column layout is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Core properties like column-count, column-width, column-gap, column-rule, and column-span have excellent cross-browser support. The column-fill: balance-all value has more limited support and may behave inconsistently across browsers, so it is worth testing and providing a column-fill: balance fallback if needed.

Use the column-gap property to control the space between columns. It accepts any valid CSS length value, such as column-gap: 2em; or column-gap: 24px;. The default value is 1em in most browsers. Note that column-gap is also used in Flexbox and Grid layouts, so if you are familiar with those, it works the same way. Any column-rule is drawn in the centre of this gap.

Yes - this is one of the strengths of the column-width property. By setting only column-width and not column-count, the browser automatically calculates how many columns fit the container at any given viewport width. On a wide screen you might get four or five columns; on a narrow mobile screen the content collapses to a single column, all with no media queries needed. This makes column-width a lightweight responsive technique for text-heavy content.