CSS Grid Layout Tutorial

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.

Grid changes everything.

It gives you:

• 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:

• Rows
• Columns
• Gaps
• Item positioning

…with simple, readable CSS.

Example Grid Setup:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

This immediately creates a 3-column layout with spacing.

No floats.

No flexbox hacks.

No positioning tricks.

2. Creating Your First Grid Container

Any parent element can become a grid:

.grid {
  display: grid;
}

Now you choose how many columns/rows you want.

Fixed Columns:

grid-template-columns: 200px 200px;

Responsive Columns:

grid-template-columns: 1fr 2fr;

Where:

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

3. Defining Rows and Columns

Columns

grid-template-columns: repeat(3, 1fr);

This creates:

• 3 columns
• Each equal width

Rows

grid-template-rows: 100px auto 200px;

CSS Grid supports:

• px
• fr
• %
• auto
• minmax()

Example Using minmax():

grid-template-columns: repeat(3, minmax(150px, 1fr));

This ensures:

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

Perfect for responsive layouts.

4. Grid Gaps (No More Margin Hacks)

grid-gap: 20px;

Or:

row-gap: 20px;
column-gap: 10px;

Clean and simple.

5. Placing Items on the Grid

Every grid item can be positioned easily:

.item1 {
  grid-column: 1 / 3; /* spans columns 1 to 2 */
  grid-row: 1 / 2;
}

Span Shortcut

grid-column: span 2;

Real Example:

header { grid-column: 1 / -1; } /* full width */
sidebar { grid-column: 1 / 2; }
content { grid-column: 2 / 4; }

6. Creating Responsive Layouts with CSS Grid

Method 1: Auto-Fit + Minmax

This is the most powerful responsive pattern:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

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)

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Used for advanced layouts only.

7. Aligning Items in Grid

Align Items Vertically

align-items: center;

Align Items Horizontally

justify-items: center;

Align Whole Grid Content

place-content: center;

Align Individual Items

place-self: end;

Grid gives you full control.

8. Template Areas (Most Beginner-Friendly Feature)

You can visually draw your layout using names:

CSS:

.grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Assign areas to elements:

header { grid-area: header; }
sidebar { grid-area: sidebar; }
content { grid-area: content; }
footer { grid-area: footer; }

This makes layout code readable like a wireframe.

9. Complete Example: Modern Responsive Dashboard

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header header"
    "sidebar main   widgets"
    "sidebar footer footer";
  gap: 20px;
}

This is similar to many modern admin dashboards — easy to build with Grid.

10. CSS Grid vs Flexbox — When to Use Each?

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

You now know:

• ✔ 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.