CSS Multi-Column Layout Builder

Long lines of text are tiring to read. Newspapers solved this long ago by setting text in narrow columns, and CSS offers the same with the multi-column properties: the browser flows one passage down the first column and continues at the top of the next. It needs no wrapper elements, adapts to the width of the container and can be combined with ordinary paragraph styling. This generator exposes the properties with a live text preview and writes the declarations for you.

Count or width

column-count asks for a fixed number of columns, and the browser divides the available width by that number. column-width sets the minimum width of a column, and the browser fits as many as the space allows. On a phone a three-column count produces slivers that are too narrow to read, while a width of 220 pixels simply drops to one column when the space is smaller than twice that. Choose the width mode when the layout must adapt, and the count mode when a design really requires an exact number.

A worked example

Press Sample for the default layout: three columns, a 32 pixel gap, a solid one pixel rule in #cbd5e1, balanced fill and a headline that spans all columns. The page writes column-count: 3;, column-gap: 32px; and column-rule: 1px solid #cbd5e1;, followed by a separate rule column-span: all; for the heading. In the preview the headline runs across the top and the four paragraphs flow beneath it in three columns of roughly equal height. Change the mode to minimum width with 220 pixels and the first line of the output becomes column-width: 220px;.

Gap and rule

The gap is the empty space between columns and the rule is a line drawn in the middle of it, like the line in a newspaper. The rule takes no space of its own, so it does not widen the gap. Gaps under about 20 pixels feel cramped for text at ordinary sizes; the default of 32 pixels reads comfortably. A rule width of zero removes the rule and the page then leaves the line out of the output.

Balance and fill

By default browsers balance the columns so they end together, which suits an article. Pick “Fill in order” for column-fill: auto: the browser fills the first column to the container’s height and then starts the second, which only makes more than one column if you give the container a fixed height, as the preview does with 260 pixels. This is how paged, book-like layouts are built, with horizontal scrolling as a side effect if the content overflows.

Edge cases

Elements that must not be split, such as figures, quotes and boxes, need break-inside: avoid. A heading at the bottom of a column can be left alone there; break-after: avoid on the heading keeps it with the following paragraph. Spanning elements split the container into separate multicolumn blocks, each balanced on its own. Percent widths of children refer to the column, not to the whole container.

Limits

The generator writes the container properties and the one spanning rule. It does not write media queries, break rules for specific elements or the responsive switch to a single column. The sample text is placeholder copy for judging layout only. Everything is computed in your browser.

Related tools

• Flexbox Generator arranges items in a line rather than flowing text.
• CSS Grid Generator builds card grids where columns are the wrong tool.
• Line Height Calculator sets comfortable spacing for each column.
• CSS Clamp Calculator scales the type size fluidly.