Design Visually • Drag to Reorder • Export CSS & HTML
This tool lets you design a Flexbox or CSS Grid layout visually instead of guessing at property values from memory. Adjust the container's alignment, direction, wrapping, and spacing, add or remove boxes, drag any box to reorder it, and click a box to fine-tune its individual properties — flex-grow and order in Flexbox mode, or column/row span in Grid mode. When the layout looks right, copy the generated CSS and matching HTML structure straight into your project. All processing happens locally in your browser.