CSS Grid Layout

Build any website layout in minutes. The most powerful CSS tool every developer needs.

I used to build layouts with floats. Then with Flexbox. But the moment I discovered CSS Grid — I realized I had been doing things the hard way my entire life. Grid is the most powerful layout tool ever added to CSS.

What is CSS Grid?

CSS Grid is a 2-dimensional layout system. This means it can handle both rows AND columns at the same time — something Flexbox cannot do alone.

Flexbox

Works in ONE direction — either row OR column. Best for navigation bars and small components.

CSS Grid

Works in TWO directions — rows AND columns together. Best for full page layouts.

Key Properties You Must Know

Property	What It Does	Example
display: grid	Activates Grid on container	display: grid
grid-template-columns	Defines column sizes	repeat(3, 1fr)
grid-template-rows	Defines row sizes	auto 1fr auto
gap	Space between grid items	gap: 16px
grid-column	How many columns item spans	grid-column: 1 / 3
fr unit	Fraction of available space	1fr 2fr 1fr

Basic Grid — 3 Equal Columns

CSS

/* Basic 3-column grid */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 16px;
}

/* Shorter way using repeat() */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* same result */
  gap: 16px;
}

Real Website Layout — Header, Sidebar, Content, Footer

CSS

/* Full website layout */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr; /* sidebar + content */
  grid-template-rows: 60px 1fr 60px;   /* header + main + footer */
  gap: 16px;
  min-height: 100vh;
}

.header {
  grid-column: 1 / -1; /* spans ALL columns */
  background: #0f1117;
}

.footer {
  grid-column: 1 / -1; /* spans ALL columns */
  background: #0f1117;
}

Pro Tips

Pro Tip #1 — Use fr units always

The fr unit means fraction of available space. Instead of writing 33.33% — just write 1fr 1fr 1fr. Much cleaner and automatically responsive.

Pro Tip #2 — grid-column: 1 / -1 is magic

Writing 1 / -1 makes an element span ALL columns automatically — no matter how many columns your grid has. Perfect for headers and footers.

Pro Tip #3 — Combine Grid and Flexbox

Use Grid for the page layout — rows and columns of the full page. Use Flexbox inside each grid item — for aligning content within each section. They work perfectly together.

Quick Reference Cheatsheet

CSS CHEATSHEET

/* Grid Cheatsheet */

display: grid;                          /* activate grid */
grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
grid-template-columns: 250px 1fr;        /* fixed + flexible */
gap: 16px;                            /* space between items */
grid-column: 1 / -1;                  /* span all columns */
grid-column: span 2;                  /* span 2 columns */
place-items: center;                  /* center everything */

Next Lesson

JavaScript Closures — Explained Simply

Search This Blog

WaheedBlog | Free Web Development Tutorials for Beginners

CSS Grid Layout — Complete Guide for Beginners