CSS Grid Generator
Visual CSS Grid layout generator for creating responsive layouts
Grid Settings
Grid Preview
📄 Generated CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 16px;
}
.grid-item {
/* Add your item styles here */
}
🎨 Popular Grid Templates
Holy Grail
Magazine
Dashboard
Portfolio
📐 Grid Units
• fr (fraction): 1fr, 2fr
• px (pixels): 200px, 300px
• % (percentage): 25%, 50%
• auto: fits content
• min-content: minimum size
• max-content: maximum size
• minmax(): minmax(200px, 1fr)
🎯 Grid Functions
• repeat(): repeat(3, 1fr)
• minmax(): minmax(200px, 1fr)
• fit-content(): fit-content(200px)
• auto-fit: repeat(auto-fit, minmax(200px, 1fr))
• auto-fill: repeat(auto-fill, minmax(200px, 1fr))
📱 Responsive Design
/* Mobile first */
.grid {
grid-template-columns: 1fr;
}
/* Tablet */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
🏗️ Grid Areas
/* Named grid areas */
.grid {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
🎯 What is CSS Grid?
CSS Grid is a two-dimensional layout system that allows you to create complex responsive layouts with rows and columns. It's perfect for creating structured layouts like dashboards, magazine-style designs, and card grids.
Why use CSS Grid? Grid provides precise control over both horizontal and vertical spacing, makes responsive design easier, and eliminates the need for complex float or flexbox hacks for layout.
Browser support: CSS Grid is supported in all modern browsers, making it safe to use in production websites.
🔧 Grid Properties
- display: grid: Creates a grid container
- grid-template-columns: Defines column sizes and number
- grid-template-rows: Defines row sizes and number
- gap: Sets spacing between grid items
- grid-column: Positions items across columns
- grid-row: Positions items across rows
- grid-template-areas: Creates named grid regions
- justify-items & align-items: Aligns items within their cells