Two builders for the two layout systems of CSS, each drawing a live preview with your own browser and writing three outputs: CSS, the HTML it styles, and the same layout as Tailwind CSS v4 classes.
- Grid: columns and rows as tracks (
fr, px, %, auto, min-content, max-content or minmax(px, fr)), runs of equal tracks written as repeat(), separate row and column gaps, the four alignment properties, a responsive "fit as many columns as fit" mode, and named areas you paint by clicking or dragging across cells. - Flexbox: direction, wrapping,
justify-content, align-items and align-content, a gap, and per item flex-grow, flex-shrink, flex-basis, order and align-self, written with the shortest correct flex shorthand.
The preview box can be resized from its corner, which is the quickest way to see what auto-fit or wrapping does as the space changes.
Grid in practice
The "Header, 3 columns, footer" preset writes this:
.grid {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 16px;
}
plus one grid-area rule per area. fr shares out the space left after fixed tracks and gaps: in an 800 px wide container, two 200 px columns and two 16 px gaps leave 368 px for the 1fr middle. minmax(160px, 1fr) never goes below 160 px. With "fit as many columns as fit" the columns become repeat(auto-fit, minmax(220px, 1fr)): cards that reflow from four columns to one with no media query.
To paint areas, type a name (or pick an existing one) and click or drag across cells; Shift+click fills the rectangle from the previous cell, and the keyboard works too (Tab to a cell, Enter to paint). CSS requires every named area to be one filled rectangle: an L shape, or the same name in two separate places, makes the whole grid-template-areas value invalid and the browser ignores it. The tool says which name breaks the rule and leaves the areas out of the output until it is fixed, so you never copy CSS that silently does nothing.
Flexbox in practice
flex: 1 means grow 1, shrink 1, basis 0%: items share all the space equally regardless of their content. flex: auto (basis auto) shares only the space left after each item's natural size, so longer content stays wider. flex: none keeps an item at its own size. The tool writes those keywords when they apply and the three numbers otherwise, so 2 0 200px reads as "start at 200 px, take two shares of extra space, never shrink". Note that order and the -reverse directions change only what is painted, not the order screen readers and the Tab key follow; keep the source order meaningful.
The Tailwind output
Classes follow Tailwind CSS v4: equal 1fr columns become grid-cols-3, other track lists become arbitrary values such as grid-cols-[200px_1fr_200px] (spaces turn into underscores), gaps on the 4 px spacing scale use names (gap-4 for 16 px, gap-1.5 for 6 px) and other values arbitrary ones. Named areas use an arbitrary property, [grid-template-areas:'header_header'_'nav_main'], and each item gets [grid-area:name].
For which system to choose and three worked layouts, read CSS grid vs flexbox: worked layouts. To finish the look, add depth with the box shadow generator or a background from the CSS gradient generator, and shrink the final stylesheet with the code minifier.
