CSS Columns Generator
Generate CSS multi-column layout — column count, width, gap and divider rule — with a live newspaper-style preview, then copy the CSS and HTML.
Input
0 = auto. With a width set, the browser may use fewer columns than the count when space is tight.
Output
Your column layout will appear here.
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-columns-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-columns-generator` tool (CSS Columns Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/css-columns-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Columns Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
CSS multi-column layout flows one block of content into several columns, like a newspaper, with no extra markup. This generator lets you set the column count, preferred width, gap and divider rule, shows a live preview, and gives you the CSS to copy.
How to use it
- Set the column count (1–6), or add a column width so the browser picks how many columns fit.
- Adjust the gap between columns.
- Choose a divider rule: style, width and color. Pick "None" to remove it.
- Copy the CSS and HTML.
Count vs. width
column-count fixes the number of columns. column-width sets the ideal width and lets the browser fit as many columns as it can. When you set both, the shorthand columns: 200px 3 means "up to 3 columns, each at least 200px wide", which is the usual way to make a layout collapse gracefully on small screens.
Tips
- Columns suit long text. For card grids and page layouts use CSS Grid instead, see the CSS Grid Generator.
- Use
break-inside: avoidon children such as figures that shouldn't split across columns. - The divider rule takes no space of its own. It sits in the middle of the gap.
Privacy
Everything runs in your browser. Your settings are never uploaded.