How to Create a CSS Grid Layout Visually
CSS Grid is powerful but the syntax is hard to memorize. Design your layout visually and copy the code.
Quick Answer
Use the free CSS Grid generator at dotsapps.com. Set your columns, rows, and gaps visually. Place items in the grid. Copy the generated CSS and HTML code.
Why Use CSS Grid?
CSS Grid is the best way to create two-dimensional layouts on the web. Unlike Flexbox (which handles one direction), Grid handles both rows and columns at the same time.
Use Grid for:
- Page layouts with header, sidebar, main content, and footer.
- Card grids like product listings or image galleries.
- Dashboard layouts with panels of different sizes.
- Magazine-style layouts where items span multiple rows or columns.
The challenge is that Grid has many properties (grid-template-columns, grid-template-rows, grid-gap, grid-column, grid-row). A visual tool makes it much easier to learn and use.
How to Design a Grid Layout Visually
Open the CSS Grid generator at dotsapps.com. Start by setting the number of columns and rows. Adjust the gap (spacing) between cells.
You can set column widths using pixels, percentages, or the fr unit. The fr unit distributes available space proportionally — 1fr 2fr means the second column is twice as wide as the first.
Place items by clicking grid cells or spanning items across multiple cells. The tool shows the layout in real time.
Common CSS Grid Patterns
Here are layouts you can build in the generator:
Equal columns:
grid-template-columns: repeat(3, 1fr);
Three equal-width columns. Change 3 to any number.
Sidebar layout:
grid-template-columns: 250px 1fr;
Fixed sidebar plus flexible main content.
Holy grail layout:
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
Header, three columns, footer — the classic web layout.
Auto-fit responsive grid:
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
Cards that automatically wrap to new rows. No media queries needed.
Grid vs Flexbox: When to Use Which
Use CSS Grid when:
- You need control over both rows AND columns.
- You are building a full page layout.
- Items need to span multiple rows or columns.
Use Flexbox when:
- You are aligning items in a single row or column.
- You want items to wrap naturally.
- You need simple centering (both horizontal and vertical).
In practice, most pages use Grid for the overall layout and Flexbox for components within the grid cells.
How to Do It: Step-by-Step
- 1
Open the free CSS Grid Generator at dotsapps.com.
- 2
Set the number of columns and rows for your layout.
- 3
Adjust column widths (px, %, or fr units) and row heights.
- 4
Set the gap between grid cells.
- 5
Copy the generated CSS code and paste it into your project.
Frequently Asked Questions
What is the fr unit in CSS Grid?
The fr unit represents a fraction of available space. '1fr 2fr' creates two columns where the second is twice as wide. It is the most flexible way to size grid columns.
Is CSS Grid supported in all browsers?
Yes. CSS Grid is supported in all modern browsers: Chrome, Firefox, Safari, Edge. Only Internet Explorer has partial/different support, and it is no longer widely used.
Can I make a responsive grid without media queries?
Yes. Use repeat(auto-fit, minmax(250px, 1fr)) for columns. Items automatically wrap to new rows when there is not enough space. No media queries needed.
What is the difference between grid-gap and gap?
They are the same. 'gap' is the modern shorthand that works for both Grid and Flexbox. 'grid-gap' is the older name. Use 'gap' for new projects.
Ready to Try It?
CSS Grid Generator is free, private, and works right in your browser. No sign-up needed.
Open CSS Grid Generator