CSS Layout and Spacing Generators

CSS Grid, Flexbox, Clamp, Media Query and px to rem 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.

Most used this week

Masonry Grid Builder

Pinterest-style masonry layouts in pure CSS.

Every Layout & Spacing tool

:has() Selector Builder

Pick a :has() pattern, see it work live and copy the HTML and CSS.

Bento Grid Builder

Bento-box grid layouts with spanning tiles, copy-ready.

Breakpoint Helper

Media query and container query boilerplate from a breakpoint.

Cascade Layers Generator

Set your @layer order and get the blocks or imports to paste.

Masonry Grid Builder

Pinterest-style masonry layouts in pure CSS.

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.