CSS Grid Generator
Create powerful CSS Grid layouts with live preview. Design responsive grid systems with full control over columns, rows, gaps, and alignment.
Grid Template
Examples: 1fr 1fr, repeat(3, 1fr), 200px auto 1fr
Examples: auto, 100px 200px, repeat(2, 1fr)
Gap
Alignment
Auto Flow
Dense packing fills gaps with smaller items
Grid Items
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Recommended Settings
Grid Best Practices
- •Use fr units for flexible, responsive layouts
- •minmax() prevents content overflow and provides flexibility
- •auto-fit and auto-fill create responsive grids without media queries
- •Use gap instead of margins for consistent spacing
- •Grid lines are 1-indexed (start at 1, not 0)
Performance Tips
- •CSS Grid is highly performant for layout (GPU accelerated)
- •Avoid excessive nesting - keep grid structures flat
- •Use auto-fit/auto-fill for responsive designs
- •Prefer grid over floats or complex flexbox for 2D layouts
- •Grid doesn't require JavaScript for responsive behavior
Pro Tips
- •Use repeat() for repeated column/row patterns
- •minmax(min, max) creates flexible tracks with boundaries
- •auto-fill creates as many tracks as fit, auto-fit collapses empty tracks
- •Grid is better for 2D layouts, Flexbox for 1D layouts
Most Popular
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
When to Use This Tool
Create complex dashboard layouts with headers, sidebars, and content areas. Grid makes it easy to create Holy Grail layouts and responsive dashboards.
Recommended: Holy Grail or Dashboard preset
Design responsive card grids that automatically adjust to screen size. Perfect for product listings, blog posts, or image galleries.
Recommended: Auto Fit Cards or Gallery preset
Build entire page structures with Grid. Define header, navigation, main content, sidebar, and footer areas with precise control.
Recommended: Holy Grail or Magazine preset
Create layouts that adapt to different screen sizes without media queries using auto-fit, auto-fill, and minmax().
Recommended: Auto Fit Cards with minmax()
Build intricate UI components like calendars, data tables, or form layouts where precise 2D positioning is required.
Recommended: Magazine or custom grid
How It Works
Choose a preset layout or start with default 3-column grid
Define columns using fr units, px, %, auto, or minmax()
Set row template or use 'auto' for automatic row sizing
Adjust gap between grid items (0-100px)
Configure alignment: justify/align content and items
Set auto-flow direction (row, column, or dense packing)
Add or remove grid items to see how layout adapts
Copy generated CSS code to use in your project
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What's the difference between fr units and percentages?
fr (fraction) units distribute available space after fixed-size tracks are laid out. 1fr 1fr creates two equal columns. Percentages are based on container size. fr units are more flexible and recommended for responsive grids as they account for gaps automatically.
When should I use Grid vs Flexbox?
Use Grid for two-dimensional layouts where you need control over both rows and columns (dashboards, page layouts, galleries). Use Flexbox for one-dimensional layouts where items flow in a single direction (navigation bars, button groups, simple lists).
What is auto-fit vs auto-fill?
auto-fit collapses empty tracks to 0, making remaining tracks expand to fill space. auto-fill keeps empty tracks at their minimum size. Use auto-fit when you want items to stretch, auto-fill when you want to maintain track size even if empty. Both create responsive grids.
How does minmax() work?
minmax(min, max) defines a size range for grid tracks. For example, minmax(200px, 1fr) means tracks are at least 200px wide but can grow to fill available space. This prevents content overflow while maintaining flexibility. Perfect for responsive card grids.
What does 'dense' packing do?
Grid auto-flow with 'dense' keyword fills in gaps by placing smaller items in earlier empty cells. This creates a tighter layout but may change visual order. Use for masonry-style layouts or when order isn't critical. Avoid for content where reading order matters.
Do I need browser prefixes for CSS Grid?
Modern browsers (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+) support CSS Grid without prefixes. IE 10-11 have partial support with -ms- prefix but use an older spec. For production, consider using autoprefixer or check if your users need IE support.