CSS Grid — Complete Guide

CSS Grid — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of CSS Tutorial on Toolliyo Academy.

8 min read Updated 8/21/2026

On this page

CSS Tutorial · Lesson 14 of 100

CSS Grid

Foundations & Layout → Responsive & Motion → Architecture & Perf → Projects

Foundations & Layout · 1 — Style · ~12 min read · CSS — Layout Systems

1. Introduction

Today: CSS Grid. Read the diagram, paste the CSS, then change one value and watch the UI update.

CSS Grid divides a container into rows and columns. grid-template-columns and grid-template-rows define tracks; gap spaces cells; grid-column spans multiple tracks.

2. Real-world story

Three-pane layout: nav, charts, activity feed.

Outcome: Grid template replaces nested flex wrappers.

3. Why it matters

StyleVerse dashboards use grid for sidebar + main + right panel — layouts flexbox alone struggles to express cleanly.

4. Visual understanding

Read this diagram — the mental model for CSS Grid.

grid container
┌─────┬──────────┬─────┐
│ nav │   main   │aside│
├─────┴──────────┴─────┤
│       footer         │
└──────────────────────┘
tracks = columns / rows · gap between cells

5. Key concepts (easy words)

Idea	Meaning
What	CSS Grid divides a container into rows and columns. grid-template-columns and grid-template-rows define tracks; gap spaces cells; grid-column spans multiple tra
Remember	Grid defines 2D row and column tracks. fr unit splits free space. grid-column span merges cells.
Layout tip	Style the container first, then tune children.

6. How it works

Three-column grid with full-width header spanning all columns. Sidebars fixed width; center column fluid with 1fr.
Grid defines 2D row and column tracks.
fr unit splits free space.
Check the result in DevTools → Computed and the box model overlay.

7. Choose wisely

Option	Notes
Grid	Full page / dashboard frames
Flexbox	Toolbars and item groups inside cells
Both	Common: grid page + flex components

8. Try this example

Paste into a <style> block (or use Run Example). Refresh to see StyleVerse UI changes.

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  grid-template-rows: auto 1fr;
  gap: 16px;
  min-height: 100vh;
}
.header { grid-column: 1 / -1; }

Line walkthrough

Code	What it means
`.dashboard {`	Selector — picks which elements get these declarations.
`display: grid;`	Declaration — property and value that change appearance.
`grid-template-columns: 240px 1fr 280px;`	Declaration — property and value that change appearance.
`grid-template-rows: auto 1fr;`	Declaration — property and value that change appearance.
`gap: 16px;`	Declaration — property and value that change appearance.
`min-height: 100vh;`	Declaration — property and value that change appearance.
`}`	Ends the rule block.
`.header { grid-column: 1 / -1; }`	Selector — picks which elements get these declarations.

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

Result

9. Another real-world angle

10. Best practices checklist

Prefer classes over ids for reusable StyleVerse components.
Use design tokens (CSS variables) for color and spacing.
Mobile-first media queries; test keyboard focus.
Keep specificity low — avoid !important except rare overrides.
Animate transform/opacity when you can; respect prefers-reduced-motion.

11. Common mistakes

Using grid for simple one-row toolbars where flex is enough.
Not setting min-width: 0 on grid children — overflow hidden bugs.

12. Practice in the browser

Place header, left nav, main, right aside in grid.
Assign grid-column: 1 / -1 to header.
Resize window — sidebars stay fixed, center grows.
Add grid-template-areas for readable layout map.

Experiments

Switch to grid-template-areas: "head head" "nav main" "nav aside".
Collapse to one column under 768px with media query.

13. FAQ

Where should I put CSS for CSS Grid?

Start in a <style> block or styles.css linked from HTML. Later use CSS Modules, Tailwind, or tokens in a design system.

Why is my rule not applying?

Check selector match, typos, specificity, and whether a more specific rule or inline style wins. DevTools Computed tells the truth.

Flexbox or Grid for this?

Flex for one direction (toolbars, card rows). Grid for two-dimensional page frames. Many UIs use both.

14. Interview questions

Explain CSS Grid simply.

CSS Grid divides a container into rows and columns. grid-template-columns and grid-template-rows define tracks; gap spaces cells; grid-column spans multiple tracks.