CSS Grid Layout Tutorial
Reviewed & published by Brayan K
A complete beginner-to-advanced guide to modern layout with CSS Grid — rows, columns, responsive layouts and examples.
A complete beginner-to-advanced guide to mastering modern layout design.
Introduction
CSS Grid is one of the most powerful layout systems ever added to CSS. Before Grid, developers struggled with floats, hacks, nested divs, and endless media queries.
- True 2D layouts (rows + columns)
- Responsive layouts without media-query overload
- Cleaner, modern code
- Full control over spacing and alignment
- Less HTML, more design flexibility
In this tutorial, you'll learn exactly how CSS Grid works — with examples you can use instantly.
1. What is CSS Grid?
CSS Grid is a layout system that lets you define:
- Item positioning
…with simple, readable CSS.
This immediately creates a 3-column layout with spacing.
2. Creating Your First Grid Container
Any parent element can become a grid:
Now you choose how many columns/rows you want.
Responsive Columns:
- 1fr = equal fraction of available space
- 2fr = takes twice the space of 1fr
3. Defining Rows and Columns
Columns
- Each equal width
Example Using minmax():
- No column shrinks below 150px
- Columns stretch to fill space
Perfect for responsive layouts.
5. Placing Items on the Grid
Every grid item can be positioned easily:
6. Creating Responsive Layouts with CSS Grid
Method 1: Auto-Fit + Minmax
This is the most powerful responsive pattern:
This creates a grid that:
- Shrinks when space is small
- Expands when space is available
- Automatically adjusts number of columns
- Needs no media queries
Method 2: Media Queries (Optional)
Used for advanced layouts only.
7. Aligning Items in Grid
Align Individual Items
Grid gives you full control.
8. Template Areas (Most Beginner-Friendly Feature)
You can visually draw your layout using names:
CSS:
Assign areas to elements:
This makes layout code readable like a wireframe.
9. Complete Example: Modern Responsive Dashboard
This is similar to many modern admin dashboards — easy to build with Grid.
10. CSS Grid vs Flexbox — When to Use Each?
| Feature | Use CSS Grid | Use Flexbox |
|---|---|---|
| 2D layout (rows + columns) | ✔ YES | ✖ NO |
| 1D layout (row or column) | ✖ NO | ✔ YES |
| Complex page structure | ✔ | ✖ |
| Navigation bars | ✖ | ✔ |
| Full-page layout | ✔ | ✖ |
| Aligning items on one axis | ✖ | ✔ |
Use both together for best results.
11. Common CSS Grid Mistakes
- ❌ Using fixed px everywhere
- ❌ Overlapping Flexbox and Grid incorrectly
- ❌ Forgetting fr units (most beginner-friendly)
- ❌ Making everything span too many rows/columns
- ❌ Not using auto-fit and auto-fill
Follow modern patterns and Grid becomes insanely powerful.
12. Summary
- ✔ How Grid works
- ✔ How to define rows and columns
- ✔ How to span items
- ✔ How to build responsive layouts
- ✔ How template areas work
- ✔ When to use Grid vs Flexbox
- ✔ Real dashboard layout examples
CSS Grid is one of the best tools in modern front-end development. Practice building layouts and you'll become faster, cleaner, and more professional in your web design.
Related articles
- CSS Flexbox: A Visual Guide — Master the flex container, axes, alignment properties, and common layout patterns with visual examples.
- Building Forms with HTML5 and Validation — Create accessible, user-friendly forms with modern HTML5 validation techniques.
- Responsive Web Design Fundamentals — Master CSS techniques to create websites that look great on any device.