Fix the column count, or fix the column width
In a multicolumn layout text fills one column and then flows into the next. Pick either column-count, which fixes how many columns there are, or column-width, which fixes a minimum width per column, then set the gap, the rule and the fill mode to get CSS you can paste as it stands. Enter a container width and the tool also reports how wide one column actually ends up.
Column width is found by subtracting the total gap width from the container width and dividing by the column count. In column-width mode the number of columns that fit is resolved first, following the calculation order in the W3C CSS Multi-column Layout specification, and the same division then gives the width. The rule is drawn inside the gap and takes no width of its own. This reflects October 2026.
A real browser can land slightly differently once fonts, padding and the minimum width of nested elements come into play, so treat this figure as the calculated baseline. break-inside handling for elements that split across columns is not covered here, and neither are grid or flex layouts.
Frequently asked questions
column-count fixes the number of columns and stretches their width to fit. column-width fixes a minimum column width and fits in as many columns as will go, so narrow screens end up with fewer columns.
The total gap width is subtracted from the container width and the remainder is divided by the column count. The rule is drawn inside the gap, so it takes no width of its own.
Yes. Turning on the full-width heading option adds a separate column-span declaration for the heading element, so the heading crosses every column while the body text stays in columns.