CSS Grid Generator
Create and visualize CSS Grid layouts with this interactive tool. Define your grid columns, rows, and areas, then get the generated CSS code that you can use in your projects.
Choose a Layout Template
Simple Blog
Header, content, sidebar, and footer
Portfolio
Header, featured work, sidebar, and footer
Dashboard
Header, sidebar, main content areas, and footer
Holy Grail
Classic web layout with centered content
Magazine
Complex layout for content-rich sites
Product Page
E-commerce product layout
Grid Structure
How to Use CSS Grid
1. Choose a Layout
Start with one of the predefined layouts that best fits your project needs. Each template represents a common website layout pattern.
2. Customize (Optional)
Use the Customize button to modify column and row sizes. You can use values like:
frunits: Flexible fractions (1fr, 2fr) - responsive sizingpxvalues: Fixed pixel sizes (200px, 300px)auto: Sizes content automatically%values: Percentage based (50%, 100%)minmax(min, max): Responsive with limits
3. Preview Your Layout
Toggle between "Grid View" to see the structure and "Content Preview" to visualize how content will appear in your layout.
4. Get the CSS
Click "Show CSS" to see the generated CSS code. Copy this to your project.
Add this CSS to your stylesheet, then use the corresponding class names in your HTML:
<div class="container"> <header class="header">Header content</header> <main class="main">Main content</main> <aside class="sidebar">Sidebar content</aside> <footer class="footer">Footer content</footer> </div>