CSS Grid Generator

Create beautiful website layouts in 4 easy steps

Start with a Template
Choose a pre-made layout to get started quickly, then customize it to your needs
🌐

Basic Website

Header, main content, and footer

3 areas
📱

Sidebar Layout

Header, sidebar, content, and footer

4 areas
📊

Dashboard

Navigation, stats panel, and main area

4 areas
✍️

Blog Layout

Header, content area, and sidebar for widgets

3 areas
🖼️

Photo Gallery

Grid layout perfect for images

3×3 grid

💡 Click any template to load it, then modify it to match your design

Step 1: Set Up Your Grid
Define how many rows (horizontal) and columns (vertical) your layout needs
1.
2.
3.
1.
2.
3.
Step 3: Name Your Areas

Give meaningful names to your selected areas (like "header", "sidebar", "content")

👆

Select cells in the grid above to get started

Click and drag to select, then type a name and click Create

Step 2: Select Areas

Click and drag on the grid below to select cells. Each selection will become a named area.

How to select: Click on any cell, then drag your mouse to select more cells. Release to finish selecting.

1,1
1,2
1,3
2,1
2,2
2,3
3,1
3,2
3,3

💡 Tip: The numbers in each cell show its position (row, column). Selected cells turn light blue. Named areas show their name and color.

Step 4: Copy Your Code

Your custom grid layout code is ready! Copy and paste it into your stylesheet.

.grid-container {
  display: grid;
  grid-template-rows: 1frfr 1frfr 1frfr;
  grid-template-columns: 1frfr 1frfr 1frfr;
  gap: 10px 10px;
}