CSS Columns Generator
Generate multi-column CSS layouts with column count, gap, rule, and width controls.
Preview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.
Settings
Column Count3
Column Gap24px
Rule Style
CSS Code
column-count: 3; column-gap: 24px;
Related tools
Flexbox PlaygroundCSS
Interactive CSS flexbox layout builder with live preview.
CSS Grid GeneratorCSS
Visual CSS Grid layout generator with cell spanning.
CSS Gradient GeneratorCSS
Build beautiful CSS gradients visually with a live preview.
Box Shadow GeneratorCSS
Create CSS box-shadow values visually with multiple shadows and live preview.
Border Radius GeneratorCSS
Visual CSS border-radius editor with per-corner control.
CSS Animation GeneratorCSS
Build CSS @keyframes animations visually with live preview.