← All Generators

Columns Generator

Multi-column layout with column count, gaps, and divider rules.

Controls

Column Count3
Gap20px
Rule Width1px
Rule Style
Rule Color

Live Preview

CSS multi-column layout allows content to flow into multiple columns like a newspaper. This property makes it easy to display long text in a magazine or newspaper style without complex markup. Adjust the controls to see how columns change the layout.

Generated Code

.element {
  columns: 3;
  column-gap: 20px;
  column-rule: 1px solid #2a2a2a;
}