CSS Flexbox & Grid Sandbox
Prototype Flexbox and Grid layouts with live visual controls. Adjust alignment, gap, and responsive behaviour, then copy production-ready CSS.
CSS Flexbox & Grid Sandbox
Adjust properties visually and copy production-ready CSS instantly.
Experiment with Flexbox and Grid β see the CSS output instantly
You're building a navbar and can't get the links to centre vertically inside the container. You need a three-column card layout but the middle column won't stretch to match the others. You've read the MDN docs on justify-content and align-items but the difference still doesn't click. Switch between Flexbox and Grid mode, adjust the dropdowns and sliders, and watch the numbered boxes in the preview area rearrange in real time. When the layout looks right, click Copy CSS to grab the production-ready block.
In Flexbox mode, adjust flex-direction, flex-wrap, justify-content, align-items, align-content, and gap. In Grid mode, type any valid CSS into the grid-template-columns and grid-template-rows fields β including repeat(3, 1fr), minmax(200px, 1fr), or auto-fill β and see how items reflow. The generated CSS block updates with every change.
Who uses this sandbox
A front-end developer needs a responsive card grid that works at 320px and 1,440px. Instead of writing CSS, saving, refreshing the browser, adjusting, and repeating, they type grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) into the Grid input and immediately see 1 card on mobile, 2 on tablet, and 4 on desktop. The Copy CSS button gives them the exact declaration to paste into their stylesheet.
CSS layout is hard to learn from documentation because property interactions are not intuitive β how flex-wrap changes what align-content does, or why justify-content behaves differently in column direction. The numbered boxes in the preview make these relationships visible. An instructor can toggle flex-direction from row to column and the class instantly sees the main axis flip.
When a client says "the cards don't line up on mobile," the designer needs to isolate whether it's a gap issue, a wrapping issue, or a sizing issue. The sandbox lets them reproduce the exact property combination, test fixes, and copy the corrected CSS without touching the production codebase.
How the sandbox works β two layout modes, one live preview
Flexbox mode: one dimension at a time
Flexbox handles layout in one direction β either a row (horizontal) or a column (vertical). The flex-direction property sets which axis is the main axis. justify-content distributes items along that main axis, while align-items positions them along the cross axis. When you set flex-wrap: wrap, items spill onto multiple lines and align-content controls how those lines are spaced. The gap property adds consistent spacing between items without creating edge overflow.
Grid mode: two dimensions at once
Grid controls both rows and columns simultaneously. The grid-template-columns field accepts any valid CSS value β fixed (200px), flexible (1fr), intrinsic (auto), or repeating (repeat(3, 1fr)). You can type anything here: repeat(auto-fill, minmax(200px, 1fr)) for a responsive card grid, or 1fr 2fr 1fr for a three-column layout where the middle is twice as wide. The preview immediately shows how items reflow within the 220px-tall container.
What happens when you adjust a property
Every dropdown, slider, and text input fires an event listener on change. The update function reads the current value of every active control, builds an inline style string for the preview container, generates a formatted CSS block, and sets both the preview's style attribute and the output pre element's text content. The CSS output uses standard property names without vendor prefixes β Flexbox and Grid have been unprefixed in all major browsers since 2015β2017.
Worked example: centring items with Flexbox
A common problem: you have a div with three child elements and you want them centred both horizontally and vertically. Set flex-direction: row, justify-content: center, align-items: center, and gap: 16px. The preview shows the three numbered boxes centred in the container with 16px between them. The generated CSS gives you display: flex with those four properties β ready to paste into your stylesheet.
Worked example: responsive card grid with Grid
Set grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) and gap: 12px. With the preview container at 220px wide, you see 1 column. Drag the container wider and items reflow β 2 columns at 400px, 3 at 600px. The auto-fill with minmax means columns are always at least 200px but stretch to fill available space. The generated CSS works identically in production at any container width.
Edge cases and limitations
The Grid text inputs accept any valid CSS β malformed values won't render a valid grid, which mirrors real browser behaviour. The preview container is fixed at 220px height with overflow scroll, so tall layouts are scrollable. The item count slider ranges from 2 to 12, sufficient to demonstrate wrapping, overflow, and alignment. The sandbox doesn't generate media queries β use it to determine your ideal property values, then wrap them in @media blocks in your stylesheet.
Frequently Asked Questions
What is the difference between Flexbox and Grid?
Flexbox handles one dimension at a time β either a row or a column. Grid handles both dimensions simultaneously. Use Flexbox for component-level layouts: navbars, toolbars, button groups, or any layout where items flow in one direction. Use Grid for page-level layouts: card grids, dashboard panels, or any layout where you need to control both rows and columns. Most production sites use both β Grid for the page skeleton, Flexbox for components within grid areas.
What does justify-content vs align-items do?
In Flexbox, justify-content controls alignment along the main axis (the direction of flex-direction), and align-items controls the cross axis. For a row container, that means justify-content is horizontal and align-items is vertical. In Grid, justify-content and align-content position the entire grid within its container, while justify-items and align-items control how individual cells are positioned within their grid area.
Can I use the generated CSS directly in production?
Yes. The generated CSS uses standard property names without vendor prefixes. Flexbox and Grid have full support in all modern browsers β Chrome 29+, Firefox 28+, Safari 9+, Edge 12+. The output is valid CSS3 that can be pasted directly into a stylesheet, CSS module, or Tailwind @layer block. No autoprefixer needed for current browser targets.
What does fr mean in grid-template-columns?
fr is a fractional unit defined in the CSS Grid specification. It represents a share of the available space after fixed-size tracks are resolved. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle is twice as wide as the others. fr units are ideal for responsive layouts because they automatically redistribute space when the container changes size.
When should I use gap instead of margins?
Gap sets spacing between items without creating space at the container edges. This avoids the common first/last item margin collapse problem. Use gap for consistent spacing between siblings in Flexbox or Grid containers. Use margin for external spacing β the distance between a container and its neighbours β or for asymmetric spacing on individual items.
How does this tool handle responsive breakpoints?
The sandbox focuses on property experimentation, not media query generation. Use it to find your ideal property values, then wrap the generated CSS in @media queries in your stylesheet. For example, test grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) in Grid mode to see how items reflow, then apply that inside a breakpoint-specific media query.
Why do my grid items overlap?
Overlap happens when the grid defines fewer tracks than you have items, or when items are explicitly placed outside the defined grid area. In the sandbox, try adding more columns to grid-template-columns β for example, repeat(4, 1fr) for 6 items gives 4 columns with 2 wrapping to a second row. If items still overlap, check that no item has a grid-column or grid-row value that places it on top of another.