CSS Layout and Spacing Generators
Where things go on the page and how much room they get. Build a grid visually and copy the CSS, experiment with flexbox until it does what you mean, generate responsive containers and breakpoints, and calculate the fluid values that let type and spacing scale smoothly between screen sizes.
Search results
No tool matches that. Try a shorter word.
Every Layout & Spacing tool
Aspect Ratio
Aspect-ratio CSS plus the padding-top percentage fallback.
Bento Grid Builder
Bento-box grid layouts with spanning tiles, copy-ready.
Breakpoint Helper
Media query and container query boilerplate from a breakpoint.
CSS Grid Generator
Visual CSS Grid container generator with auto-fit mode.
CSS clamp() Calculator
Fluid font sizes with clamp(), no breakpoints needed.
Container Query Generator
Build @container queries and cqi units with a resizable live demo.
Flexbox Playground
Live flexbox layout playground that exports the container rule.
Fluid Spacing Generator
A five-step clamp() spacing scale as CSS variables.
Fluid Typography Generator
A full fluid type scale of clamp() custom properties with a live specimen.
Grid Areas Builder
Build named CSS grid layouts and copy the rule.
Line Clamp Helper
Truncate text after a set number of lines with an ellipsis.
Masonry Grid Builder
Pinterest-style masonry layouts in pure CSS.
Media Query Generator
Compose any @media query from feature options and test it live.
PX to REM Converter
Batch convert pixels to rem and back.
Responsive Container Generator
Centred max-width container with fluid padding and variants.
Tailwind to CSS
Turn Tailwind utility classes into plain CSS declarations.
Viewport Unit Converter
Convert px to vw, vh, vmin, vmax and rem for any viewport size.
Grids
The CSS grid generator lets you set columns, rows, gaps and sizing with sliders and see the result; grid areas adds named template areas you draw by dragging across cells, which is the readable way to write a page layout. Bento grid produces the uneven card mosaic popular on product pages, and masonry grid gives the Pinterest-style column layout with the CSS that actually works today, plus the native masonry value where browsers support it.
Flexbox and containers
The flexbox playground exposes every property on the container and its items — direction, wrap, justify, align, grow, shrink, basis, order — and shows the effect live, which is faster than reading the spec again. Responsive container generates a centred, max-width wrapper with padding that steps at breakpoints, or a container query setup if you would rather size by parent than by viewport. Aspect ratio writes the aspect-ratio rule and the padding-hack fallback for older browsers.
Breakpoints and fluid values
The media query generator writes min-width, max-width and range-syntax queries for the standard breakpoints or your own, including prefers-reduced-motion and colour-scheme queries. Fluid spacing and the clamp calculator produce clamp() expressions that scale a value linearly between two viewport widths — the maths is fiddly enough to get wrong by hand, and the tools show the curve. Px to rem converts values at any base size, and line clamp writes the cross-browser rules for truncating text after a set number of lines.
Tailwind to CSS
Tailwind to CSS translates a string of utility classes into the plain CSS they generate, useful when moving a component out of a Tailwind project or when you want to understand what a class is doing.
Output
Every tool produces a copyable CSS block and a preview. Nothing is saved server-side; state lives in the URL where the tool supports it, so a layout can be shared by link.