What is the difference between column-width and column-count?

Width mode states a preferred column width and lets the browser fit as many columns as the container allows, so the count changes with the viewport. Count mode fixes the number and lets the width fall out of the container instead.

Why do my character counts fall outside the 40-75 band?

The estimate uses an average advance and the band is a readability target rather than a hard limit. Adjust the column width, the gap or the container width until the readout lands inside it.

Why does the last column look shorter than the others?

That is column balancing, which is a browser estimate rather than a solved computation. A slightly different container width or the auto fill mode usually evens the columns out.

Can I use this layout for print?

The CSS is valid for print, but a fixed paper size is easier to reason about in physical units. Keep the gap and the rule sizes in millimetres or points in the print stylesheet.

Why do paragraphs never split across columns in the preview?

The preview marks each paragraph break-inside: avoid so the block stays whole, which is the declaration a heading or a figure needs. Remove it where a long paragraph should be allowed to flow between columns.

Text Column Layout Builder

Column model

Sizing mode

Column widthrem

Column gaprem

Column rulecolumn-fill

Container widthpx

Text faceText

Resulting columns2

Effective column width416px

≈ characters per column≈ 52 (in the 40–75 band)

Preview

Columns divide a wide measure into readable slices. The rules that keep a multi-column block readable are steady: keep the column width between 40 and 75 characters, keep the gutter proportional to the type size, and avoid a column that ends with a single stranded word. In CSS this is a width-driven layout: declare column-width and the browser fits as many columns as the container allows, or declare column-count and give up control of the width.

The second paragraph shows the break behaviour between columns — headings and figures should use break-inside: avoid so they are never split across a column boundary.

css output

.columns {
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  line-height: 1.6;
  columns: 26rem;
  column-gap: 2rem;
  column-fill: balance;
  widows: 2;
  orphans: 2;
  hyphens: auto;
}

Multi-column gotchas

· Column balance is a layout guess: the browser aims for equal heights but the last column can still be slightly different.
· An element with break-inside: avoid larger than the column creates overflow rather than a split — prefer avoiding tall blocks.
· Columns cannot be reflowed by the page's grid: the container must be wide enough for the whole set.
· Print stylesheets should keep column-gap and rule sizes in physical units when the output is fixed-size paper.

You Might Also Need

Text Justification Previewer

Preview justified text

Hyphenation Tester

Test hyphenation behavior

Magazine Column Setter

Set magazine columns

Print Type Specification Sheet

Spec sheet for print

The text column layout builder writes a multi-column CSS block from either a target column width or a fixed column count, then reports how many columns the container will really produce and how wide they will be. You choose the sizing mode, the gap, the rule, the fill behaviour, the container width and the face, and the built-in character estimate checks the result against the comfortable 40 to 75 character band.

What is Text Column Layout Builder?

The text column layout builder turns a short panel of controls into a complete multi-column CSS block. You set the sizing mode, the count or the column width, the column gap, an optional rule, the column-fill value, the container width, the text face and the copy; the readouts report the resulting column count, the effective column width and an approximate characters-per-column figure that is labelled as too narrow, in the 40 to 75 band, or too wide.

Sizing modes: column-width, where the browser fits as many columns as the container allows, and column-count, where the number is fixed.
Column count from 1 to 6, or column width from 10rem to 60rem.
Column gap from 0 to 8rem in quarter-rem steps, defaulting to 2rem.
Column rule options: none, 1px solid, 1px dashed and 1px dotted.
column-fill: balance for equal heights or auto to fill the columns in order.
Container width from 240px to 1400px, defaulting to 900px, and a preview that renders two paragraphs so the break behaviour between columns is visible.
The generated rule always carries widows: 2, orphans: 2 and hyphens: auto.
A gotchas panel covering column balance, break-inside, reflow limits and print units.

In width mode the effective count is computed by adding the gap to the container and dividing by the column width plus the gap, floored, so a 900px container with 26rem columns and a 2rem gap yields the count the browser will actually fit rather than the count you hoped for. In count mode the effective width is the container minus the gaps divided by the count. The character estimate divides that width by half the 16px base size, the same average-advance assumption the preview relies on, which is why it is reported as approximate. The default gap of 2rem is 32px at that base size, a common gutter for a two-column article. The preview applies the real column properties to two paragraphs, and each paragraph carries break-inside: avoid so it is never split across a boundary, the behaviour a heading or a figure needs in production.

The rule is always 1px; thicker or hairline separators are a stylesheet edit.
The character estimate is an average advance rather than a measurement of the selected face.
Column balance is a browser estimate, so the last column can still end up shorter than its neighbours.
The preview container is capped at the chosen pixel width, and a fluid container behaves differently above and below that value.
A column layout cannot be re-ordered by the page's own grid, so the container must be wide enough for the whole set.

Use it when a wide measure needs slicing: an article body, a documentation index or a print page with a specified column width. The character band is the number worth watching, and the builder reports it on every change, which is faster than measuring columns by hand. The justification question inside each column is what the justification previewer models, and the surrounding page furniture, such as running heads and column rules, belongs to the print specifications that record those decisions for production.

How to use Text Column Layout Builder

Choose column-width to let the browser fit columns, or column-count to fix the number.
Set the count or the width, then adjust the gap and decide whether a rule separates the columns.
Pick balance or auto fill, set the container width, and read the resulting columns and character band.
Paste the copy and copy the generated rule, keeping widows, orphans and hyphens if the text should break cleanly.

When to use Text Column Layout Builder vs related tools

Use it when one measure has to become several: a feature article, a documentation index or a printed page whose column width is already specified. The builder answers the two questions that come first, how many columns fit and how wide each one lands, before any content is set. The breaks inside a column belong to the hyphenation tester, and the justification of each column is what the text justification previewer models. When the columns are part of a page design rather than a web article, the magazine column setter carries the same decisions into print.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.