CSS Grid Layout Tutorial

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

This immediately creates a 3-column layout with spacing.

2. Creating Your First Grid Container

Now you choose how many columns/rows you want.

Fixed Columns:

Responsive Columns:

• 1fr = equal fraction of available space
• 2fr = takes twice the space of 1fr

3. Defining Rows and Columns

Columns

• Each equal width

Rows

Example Using minmax():

• No column shrinks below 150px
• Columns stretch to fill space

4. Grid Gaps (No More Margin Hacks)

5. Placing Items on the Grid

Span Shortcut

Real Example:

6. Creating Responsive Layouts with CSS Grid

Method 1: Auto-Fit + Minmax

This is the most powerful responsive pattern:

• Shrinks when space is small
• Expands when space is available
• Automatically adjusts number of columns
• Needs no media queries

Method 2: Media Queries (Optional)

7. Aligning Items in Grid

Align Items Vertically

Align Items Horizontally

Align Whole Grid Content

Align Individual Items

8. Template Areas (Most Beginner-Friendly Feature)

You can visually draw your layout using names:

CSS:

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)

Complex page structure

✔

✖

Navigation bars

Full-page layout

Aligning items on one axis

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

• Responsive Web Design Fundamentals — Master CSS techniques to create websites that look great on any device.
• 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.