/ developer tools
CSS Flexbox & Grid Visualizer
Live
gap8px
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
1
2
3
4
5
6
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: normal;
gap: 8px;
}Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.
Learn and experiment with CSS layouts in real time. Flexbox mode: control flex-direction, flex-wrap, justify-content, align-items, align-content, and gap. Grid mode: edit grid-template-columns, grid-template-rows, gap, justify-items, align-items, and grid-auto-flow. 5 Flexbox presets and 6 Grid presets (3-col, sidebar, holy grail, card grid). Add/remove colored child items. Generated CSS updates live for copy-paste into your project.
How to Use
- 1Click 'CSS Flexbox' or 'CSS Grid' to choose the layout mode
- 2Click a preset (e.g. '3 columns', 'Row center') to load a starting configuration
- 3Adjust properties using the dropdowns and sliders in the left panel
- 4Click 'Add Item' to add more boxes to the layout preview
- 5Copy the generated CSS from the code block below the preview
Features
- Two-mode toggle: CSS Flexbox and CSS Grid
- Flexbox: flex-direction, flex-wrap, justify-content, align-items, align-content, gap
- Grid: grid-template-columns, grid-template-rows, gap, justify-items, align-items, grid-auto-flow - accepts any valid CSS value
- 5 Flexbox layout presets, 6 Grid layout presets
- Add/remove colored child items to test layouts
- Generated CSS for the container updates in real time
- One-click copy of the generated CSS
- 100% browser-based
Frequently Asked Questions
Guest PlanUpgrade
Community Feedback
Like
00
Total Rating
No ratings yetReviews
No reviews yet. Be the first!
Rate & Review
Was this tool helpful?
Rate this tool:
Write a Review
0/500