Create flexible and grid layouts visually. Adjust the settings below and watch the preview update in real-time. Copy the generated CSS code for your projects.
Generates media queries for mobile, tablet, and desktop
Preview
1
2
3
4
5
Generated Code
📘 How to Use This Tool
Getting Started
Choose your layout type: Click either "Flexbox" or "Grid" at the top. Flexbox is great for one-dimensional layouts (rows or columns), while Grid excels at two-dimensional layouts (rows AND columns).
Try a preset: Select a preset pattern from the dropdown to see common layout examples. You can then customize the settings to your needs.
Adjust the controls: Play with the settings on the left and watch the preview update in real-time.
Add responsive breakpoints: Check this box to generate mobile and tablet-friendly CSS automatically.
Understanding Flexbox
Direction: Controls whether items flow horizontally (row) or vertically (column).
Justify Content: Aligns items along the main axis (horizontally if row, vertically if column). Use "space-between" for even spacing.
Align Items: Aligns items along the cross axis (opposite of direction). "center" vertically centers items in a row.
Flex Wrap: Allows items to wrap to new lines when they don't fit.
Gap: Spacing between items (simpler than margins!).
Understanding Grid
Columns: Number of columns in your grid layout.
Column Size:
1fr = Equal-width columns that share available space
auto = Columns size to fit their content
minmax = Responsive columns with minimum and maximum sizes
custom = Mix units like "200px 1fr 2fr" for a sidebar layout
Gaps: Spacing between grid items (column gap = horizontal, row gap = vertical).
Justify/Align Items: Controls how items are positioned within their grid cells.
Tips & Tricks
🎯 Use the +/- buttons to add or remove preview items and see how your layout adapts.
📱 Enable responsive mode for production-ready code that works on all devices.
🔄 Switch between Flexbox and Grid to see which works best for your design.
📋 Copy the HTML tab to get the complete structure you need.
💡 Flexbox tip: Use flex-wrap: wrap with justify-content: space-between for responsive card layouts.
💡 Grid tip: Use minmax() column sizing for grids that automatically adapt without media queries.
Common Use Cases
Navigation bar: Flexbox with direction: row and justify-content: space-between
Card grid: Grid with 3 columns and minmax sizing
Centered content: Flexbox with justify-content: center and align-items: center
Sidebar layout: Grid with custom columns like "250px 1fr"
Photo gallery: Grid with equal columns and gap spacing
💾 Ready to use? Copy the generated CSS and HTML code on the page and paste them into your project, and customize the .item class with your own content styling (colors, padding, borders, etc.).
Note: The colors used in the previews are for visual demonstration purposes and are not part of the generated code.
