# CSS Columns Generator — Newspaper Layouts

> Flow text into balanced columns with a rule between them.

CSS columns flow a single block of text into multiple columns without splitting the markup. Sizing by column-width rather than column-count is almost always the better choice: it names an ideal width and lets the browser fit as many columns as there is room for, so the layout is responsive with no media queries at all. Add break-inside: avoid to figures and cards so they are not sliced across a gap, and break-after: avoid to headings so they are not stranded at the foot of a column.

**URL:** https://convertto.tech/t/css-columns-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Choose the sizing.
2. Set the ideal width.
3. Set the columns.
4. Set the gap.
5. Set the rule width.
6. Pick the rule colour.
7. The result appears immediately — copy or download it.

## FAQ

### column-count or column-width?

column-width, nearly always. It states the width you want and lets the browser decide how many fit, which makes the layout responsive with no media queries. column-count forces the same number at every screen size, so on a phone you get three unreadable slivers.

### Why is my card split across two columns?

Column layout treats the content as one continuous flow and breaks it wherever the column ends. break-inside: avoid on the element tells the browser to move the whole thing to the next column instead.

### Should long articles use columns?

Rarely on screen. Columns require the reader to scroll down and then back up for the next one, which print does not have to deal with. They work best for short lists and for actual print stylesheets.

## Related tools

- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [Gradient Text Generator](https://convertto.tech/t/gradient-text-generator): Fill text with a gradient, a metallic sheen or a chrome effect using background-clip.
- [CSS Text Shadow Generator](https://convertto.tech/t/text-shadow-generator): Design text shadows, outlines and glow effects with a live preview.
- [CSS Grid Generator](https://convertto.tech/t/css-grid-generator): Build a CSS Grid layout visually and copy the container CSS.
- [CSS Flexbox Generator](https://convertto.tech/t/flexbox-generator): Experiment with flex direction, alignment and wrapping, then copy the CSS.
- [Type Scale Generator](https://convertto.tech/t/type-scale-generator): Build a modular typographic scale and copy it as CSS custom properties.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [Text Padding Tool](https://convertto.tech/t/text-padder): Pad every line to a fixed width with any character, on the left, right or both sides.