CSS Columns Generator
Create multi-column text layouts with the CSS columns property.
Live preview
CSS multi-column layout flows a single block of text across several columns, like a newspaper. The browser balances the content automatically, so you only declare how many columns you want and how they should be spaced. It is ideal for long lists and dense reading material on wide screens.
CSS
column-count: 3; column-gap: 24px; column-rule: 1px solid #cbd5e1;
Multi-column layouts in CSS
The CSS column-count and column-gap properties flow ordinary text into balanced newspaper-style columns with no extra markup. Add a column-rule for a divider line between them. It's perfect for long lists, glossaries, and dense reading on wide screens; pair it with a media query to drop back to one column on mobile. Generated locally in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.