TechTicket Logo
CSS Fundamentals and Modern Layouts

Session 6 — CSS Grid Layout System

🎯 Session Overview

Welcome to Session 6! In the last session, we learned Flexbox, which is amazing for organizing items in a single row or a single column.

But what if you need to build an entire webpage layout? You need a Header at the top, a Sidebar on the left, Main Content in the middle, and a Footer at the bottom. Doing that with Flexbox is messy.

Today, you will learn the ultimate layout tool: CSS Grid. By the end of this session, you will learn to:

⏪ Quick Recap: Session 5 (Flexbox)

Let's remember how Flexbox works:

Rule of thumb: Use Flexbox for 1-Direction layouts (like a navigation bar). Use Grid for 2-Direction layouts (the whole page grid).

📏 What is CSS Grid?

CSS Grid is a two-dimensional layout system. That means it can handle both Columns (vertical) and Rows (horizontal) at the exact same time!

Just like Flexbox, it starts by defining a parent container. Any element placed directly inside this container automatically becomes a Grid Item.

style.css 
.container {
  display: grid;
}

But unlike Flexbox, simply typing display: grid; doesn't do much visually. You have to tell the Grid exactly what its columns and rows look like!

📐 Defining Columns and Rows

To draw the grid, we use two properties on the container: grid-template-columns and grid-template-rows.

You can use pixels (px) or percentages (%), but Grid gives us a brand new, magical unit called the fr (fraction) unit. It means "one piece of the available free space".

.container 1fr 1fr 1fr 100px 100px Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 
.container {
  display: grid;
  /* Creates 3 columns that are all exactly equal in width */
  grid-template-columns: 1fr 1fr 1fr; 
  
  /* Creates 2 rows that are exactly 100px tall */
  grid-template-rows: 100px 100px;
  
  /* Adds 10px of space between all cells! */
  gap: 10px;
}

If you use 33.3% 33.3% 33.3% and then add a gap: 10px;, the total width becomes 100% PLUS 20px of gap. Your grid will break and overflow the page!

The fr unit is incredibly smart. It calculates the gap FIRST, and then takes whatever space is left over and divides it into equal fractions. It never breaks!

✨ Interactive Demo: The Grid Maker

Change the column and gap settings below. Notice how the items automatically wrap to the next row when they run out of columns!

1
2
3
4
5
6

🏗️ Placing Items & Spanning Cells

By default, Grid places one item per cell, reading left to right. But what if you are building a website layout, and you want the Header to stretch across the entire top row?

We apply properties to the Grid Item to tell it where to start and stop using grid lines.

Line 1 Line 2 Line 3 Line 4 Header (Spans from Line 1 to Line 4) Sidebar Main Content (Spans Line 2 to 4) 
.header {
  /* Start at grid line 1, stretch until grid line 4 */
  grid-column: 1 / 4; 
}

.main-content {
  /* Start at grid line 2, stretch until line 4 */
  grid-column: 2 / 4;
}

Pro Tip: If you want an item to span all the way to the end, but you don't know how many columns there are, you can use grid-column: 1 / -1;

🏋️‍♂️ Practice Exercises

Open your code editor. Create an HTML file with a <div class="grid-container"> containing 4 boxes (<div class="box">).

Exercise 1: Three Equal Columns

In your CSS, turn the .grid-container into a grid. Define 3 equal columns using the fr unit.

display: grid;
grid-template-columns: 1fr 1fr 1fr;

Exercise 2: Fixed and Flexible

Change your columns so that the first column is exactly 200px wide, and the second column takes up the rest of the space (1fr). Remove the third column entirely.

grid-template-columns: 200px 1fr;
Since there are 4 boxes and only 2 columns, Grid will automatically create a second row for the extra 2 boxes!

Exercise 3: Mind the Gap

The boxes look squished. Add a 15px gap between all the grid items.

Apply this to the .grid-container:
gap: 15px;

🔥 Mini Challenge: The Photo Gallery

Create a grid container with 6 boxes inside it.

Your Goal: Write CSS to create a gallery layout that looks like this:

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

.box:first-child { /* Selects only the 1st box! */
  grid-column: 1 / 4;
}

🏠 Homework Project: The Holy Grail Layout

Your task is to build the classic website structure using CSS Grid.

  1. Create a .container with 4 items inside: Header, Sidebar, Main Content, and Footer.
  2. Set the grid to have 2 columns: grid-template-columns: 250px 1fr;
  3. Target the Header and tell it to span both columns (grid-column: 1 / 3;).
  4. Target the Footer and tell it to span both columns too!
  5. The Sidebar and Main Content will automatically sit perfectly in the middle row!

Give each section a different background color so you can see the layout clearly.

📝 Session Summary

⬅ Previous Session Next Session ➡