CSS Multi-Column Generator

Preview flowing text columns and copy columns, column-gap, and column-rule declarations.

Column width px

Count

Gap px

Rule px

CSS multi-column layout lets content flow from one column into the next. This preview contains enough repeated text to show how column width, count, gap, and rule interact. CSS multi-column layout lets content flow from one column into the next. This preview contains enough repeated text to show how column width, count, gap, and rule interact.

Runs locally in your browser. Generated CSS is not deployed or tested against your site automatically.

How to use this CSS Multi-Column Generator

Generate CSS multi-column layout values for column width, count, gap, and rule. Enter your values above and the result is calculated directly in your browser. No account is required.

Fast answer, clear inputs

This tool is built around one job: give the answer quickly without forcing a signup or hiding the result. Related tools are linked nearby when the next calculation or conversion is useful.