This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Generate CSS gradient code. Linear and radial. Copy-paste ready. With preview. Free design tool with instant browser-based results — no account, works on
Generate CSS box-shadow. Offset, blur, spread, color. Visual editor with preview. Free design tool with instant browser-based results — no account, works on
Generate border-radius. Per corner. Visual editor. For rounded corners. Free design tool with instant browser-based results — no account, works on desktop and
The columns property creates newspaper-style multi-column text flow. Content fills columns sequentially. The browser determines break points automatically or via break-inside/break-after properties.
columns: [count] [width]; column-gap: [gap]; column-rule: [rule]By default, browsers balance column heights. Use column-fill: auto to fill columns sequentially (first column fills before second starts). Useful for fixed-height containers.
Updated: July 2026
Create a newspaper-style article with 3 balanced columns and a subtle divider.
→ columns: 3; column-gap: 2rem; column-rule: 1px solid #e2e8f0
Let browser determine column count based on minimum width of 250px per column.
→ columns: 250px; column-gap: 1.5rem
Add break-inside: avoid to child elements that should not be split across columns (cards, figures, blockquotes). Without this, elements may be awkwardly split.
CSS columns are designed for text reflow, not page layout. For component grids, use CSS Grid or Flexbox instead. Columns cannot reorder or span items.
Generate CSS multi-column layout rules with count, gap, and rule styles. Build newspaper-style text columns with balanced breaks and separator lines. It applies the css multi-column layout (columns: [count] [width]; column-gap: [gap]; column-rule: [rule]). For example: three-column article layout — Create a newspaper-style article with 3 balanced columns and a subtle divider.