CSS Grid — Complete Guide with Examples

CSS Grid is a two-dimensional layout system that handles rows and columns simultaneously. While Flexbox is great for a single row or column, Grid excels at creating entire page layouts, card grids, and complex alignments that require both dimensions.

What You’ll Learn

By the end of this tutorial, you’ll create a grid container with display: grid, define columns with grid-template-columns and the fr unit, create visual layouts with grid-template-areas, use repeat(), auto-fill, and minmax() for responsive grids that need no media queries, and control alignment with justify-items and align-items.

Where This Fits

    flowchart LR
    A["Flexbox"] --> B["**CSS Grid**"]
    B --> C["Responsive Design"]
    C --> D["Components & Effects"]
    D --> E["Frontend-Ready Developer"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff
---

## Flexbox vs Grid — When to Use Which

| Situation | Use |
|-----------|-----|
| One row or column of items | Flexbox |
| Navigation bar (logo left, links right) | Flexbox |
| Two-dimensional layout (rows + columns) | **Grid** |
| Page layout (header, sidebar, main, footer) | **Grid** |
| Card grid that wraps | **Grid** (with `auto-fill`) |
| Centering a single item | Flexbox (simpler) |

**Rule of thumb:** If you're thinking in terms of rows AND columns simultaneously, use Grid. If you're thinking in terms of a single row or column, use Flexbox.

---

## Basic Grid Setup

```css
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}
  

<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

What happens: The container creates a grid with 3 columns and 3 rows. Children flow into the cells automatically — first into cell (row 1, col 1), then (row 1, col 2), etc.

The fr Unit — Fractions of Available Space

fr stands for “fraction”. It distributes available space proportionally:

/* 3 equal columns */
.grid { grid-template-columns: 1fr 1fr 1fr; }

/* Sidebar + main (sidebar fixed, main takes rest) */
.page { grid-template-columns: 250px 1fr; }

/* Asymmetric: main gets twice the space of each sidebar */
.page { grid-template-columns: 1fr 2fr 1fr; }

The magic of fr: Unlike %, fr only distributes remaining space after fixed-sized columns are accounted for. So grid-template-columns: 250px 1fr means “250px for the first column, then give the rest to the second column.”

Grid Template Areas — Visual Layout

grid-template-areas lets you define your layout visually using named areas:

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 1fr;
  gap: 16px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

How to read it: Each string is a row. Each name in the string is a column cell. The header spans 3 columns, the sidebar is 200px wide, the main area takes the remaining space, and the footer spans the full width.

Changing Layout with Media Queries

/* Mobile: stack everything */
@media (max-width: 600px) {
  .layout {
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }
}

This is the cleanest way to create responsive page layouts — just redefine the area grid at each breakpoint.

Responsive Grids Without Media Queries

repeat(), auto-fill, and minmax()

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Break this down:

• repeat(...) — repeats a column pattern
• auto-fill — creates as many columns as will fit
• minmax(250px, 1fr) — each column is at least 250px, but can grow to fill space

Result: On a 1200px screen, you get 4 columns. At 800px, 3 columns. At 500px, 2 columns. On a 300px phone, 1 column. No media queries needed.

auto-fit vs auto-fill

/* auto-fill: creates empty columns if there's room */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: collapses empty columns, items stretch more */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

auto-fit is usually what you want — items stretch to fill the row. auto-fill leaves empty tracks if there aren’t enough items.

Alignment in Grid

Grid uses the same alignment properties as Flexbox:

.container {
  display: grid;
  justify-items: center;    /* Horizontal alignment of items IN their cells */
  align-items: center;      /* Vertical alignment of items IN their cells */
  justify-content: center;  /* Horizontal alignment of the entire grid IN the container */
  align-content: center;    /* Vertical alignment of the entire grid IN the container */
}

place-items — Shorthand for Both Axes

.container {
  display: grid;
  place-items: center;  /* Centers everything both ways */
}

Grid Item Placement

By default, items flow into cells automatically. You can also place items explicitly:

.item {
  grid-column: 1 / 3;   /* Span from column 1 to column 3 */
  grid-row: 1 / 2;       /* Span from row 1 to row 2 */
}

/* Shorthand: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
.item { grid-area: 1 / 1 / 3 / 3; }  /* Row 1-3, Column 1-3 */

Common Grid Mistakes

1. Using Grid When Flexbox Would Be Simpler

/* ❌ Overkill: grid for three buttons in a row */
.buttons { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }

/* ✅ Simpler: flexbox for one-dimensional layouts */
.buttons { display: flex; gap: 8px; }

2. Forgetting gap for Spacing

/* ❌ Wrong: no gap between grid cells */
.grid { display: grid; grid-template-columns: 1fr 1fr; }

/* ✅ Correct: add gap */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

3. Using % When fr Is Better

/* ❌ Wrong: total must add to 100% */
.grid { grid-template-columns: 30% 70%; }

/* ✅ Correct: fr handles proportions and gaps naturally */
.grid { grid-template-columns: 3fr 7fr; gap: 16px; }

4. Not Using minmax() for Responsiveness

/* ❌ Fixed columns don't adapt */
.grid { grid-template-columns: 250px 250px 250px; }

/* ✅ Auto-fill adapts to any screen */
.grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

5. Defining More Template Rows Than Needed

Grid items flow into rows automatically. You usually don’t need grid-template-rows unless you want specific row heights. Let content determine row height.

Try It Yourself

See grid layouts in action:

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What’s the difference between Flexbox and Grid?

Q2: What does 1fr mean in Grid?

Q3: What does repeat(auto-fill, minmax(250px, 1fr)) do?

Q4: How do you create a Holy Grail layout (header, footer, sidebar, main) with Grid?

Q5: What’s the shorthand for centering content in a grid cell?

Challenge

Build a “Dashboard Layout” with Grid:

• Header with site title and user avatar (top, full width)
• Sidebar with navigation links (left, 200px)
• Main area with 3 dashboard cards in a sub-grid
• Footer (bottom, full width)
• Responsive: sidebar collapses below 768px (use grid-template-areas)

FAQ

{< faq >}

What is Css Grid?

Css Grid refers to the core concepts and practices used to build and manage modern web applications. Understanding it is essential for web developers.

Do I need prior experience to learn Css Grid?

Basic familiarity with web development concepts helps, but Css Grid can be learned step by step even as a beginner.

How long does it take to learn Css Grid?

With consistent practice, you can grasp the fundamentals in a few days to a week. Mastery takes ongoing practice and real-world projects.

Where can I use Css Grid in real projects?

Css Grid is used in a wide range of applications — from simple websites to complex enterprise systems, depending on the specific tools and technologies involved.

What are common tools used with Css Grid?

The specific tools depend on the technology stack, but version control (Git), package managers, and testing frameworks are commonly used alongside most development topics.

{< /faq >}

FAQ

What’s Next?

Now learn responsive design and visual effects:

What’s Next

Congratulations on completing this Css Grid tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!