CSS Tutorial 5: CSS Grid Layout

Flexbox vs. Grid

We learned that Flexbox is a one-dimensional system (it handles either a single row OR a single column). But what if you want to control rows and columns at the exact same time, like a chessboard? For that, we use the CSS Grid Layout.

Step 1: Activating Grid & Defining Columns

Just like Flexbox, Grid is applied to the Parent Container. Once activated, you must tell the browser exactly how many columns and rows you want to draw.

We do this using grid-template-columns and grid-template-rows. You can define exact sizes in pixels, but the modern engineering standard is to use the Fractional Unit (fr).

The "fr" Unit: 1fr means "one fraction of the available empty space." If you declare 1fr 1fr 1fr, the browser divides the container into 3 perfectly equal columns that will automatically shrink and grow based on the screen size!

The CSS: A Basic 3-Column Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Creates 3 equal columns */
  background-color: #d1c4e9;
  padding: 10px;
}

.grid-item {
  background-color: #311b92;
  color: white;
  padding: 20px;
  border: 1px solid white;
}

The Output:

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

Notice how Cell 4 automatically dropped to the next row? Grid handles the wrapping for you!

Step 2: The Gap Property

In older tutorials, you might see people using margin to push grid items apart. That is no longer necessary. CSS Grid has a built-in property called gap that perfectly spaces out the cells without touching the outside edges of the container.

The CSS: Adding Spacing

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* The middle column is twice as wide! */
  gap: 15px; /* Adds 15px of space between all rows and columns */
}

The Output:

1fr

2fr (Double Width)

1fr

Step 3: Spanning Across Multiple Tracks

Sometimes you want one specific child item to break the rules and stretch across multiple columns (like a giant header image). We do this by applying the grid-column property directly to the Child Item.

The syntax uses starting and ending "grid lines." A 3-column grid actually has 4 vertical lines (Line 1 is the far left edge, Line 4 is the far right edge).

The CSS: Making an item stretch

/* Applied to the specific child element, NOT the parent */
.wide-item {
  grid-column: 1 / 4; /* Start at line 1, stretch all the way to line 4 */
  background-color: #e74c3c;
}

The Output:

I span from Line 1 to Line 4

Normal Cell

Normal Cell

Normal Cell

Step 4: Grid Template Areas (The Visual Layout)

This is the most powerful feature of CSS Grid. Instead of doing line math, you can physically "draw" your webpage layout using words in your CSS!

First, you assign a grid-area name to each child element. Then, you arrange those names in the parent container.

The CSS: Drawing a Webpage Layout

/* 1. Name the child items */
.header { grid-area: hd; }
.sidebar { grid-area: sd; }
.main { grid-area: mn; }
.footer { grid-area: ft; }

/* 2. Arrange them in the Parent Container */
.layout-grid {
  display: grid;
  gap: 10px;
  grid-template-areas:
    "hd hd hd"
    "sd mn mn"
    "ft ft ft";
}

The Output:

Header

Sidebar

Main Content

Footer

Final Quiz: Test Your Grid Logic

Click the buttons below to verify your knowledge.

1. What is the fundamental difference between CSS Flexbox and CSS Grid?

A) Flexbox is for text, Grid is for images.

Incorrect. Both can handle any type of HTML content.

B) Flexbox is a 1-dimensional system (rows OR columns), Grid is a 2-dimensional system (rows AND columns simultaneously).

Correct! Flexbox is best for aligning items in a single straight line (like a nav bar). Grid is best for structuring an entire webpage layout mathematically.

C) Flexbox uses the 'gap' property, Grid uses 'margin'.

Incorrect. Grid extensively uses the `gap` property.

2. If you write `grid-template-columns: 1fr 2fr 1fr;`, what will the browser do?

A) Create 3 columns where the middle column is exactly twice as wide as the outer columns.

Correct! The `fr` (fractional) unit automatically calculates the available space and distributes it according to the ratio you provided.

B) Create 4 columns.

Incorrect. You provided three values, so it creates three columns.

C) Set the width of the columns to 1 pixel, 2 pixels, and 1 pixel.

Incorrect. `fr` stands for fraction, not pixels.

3. In a 3-column grid, what code forces a child item to stretch across the entire top row?

A) width: 100%;

Incorrect. Setting width: 100% just makes it fill its single cell, it does not force it to break out of the grid tracks.

B) colspan: 3;

Incorrect. `colspan` is a legacy HTML attribute used in `<table>` layouts, not CSS Grid.

C) grid-column: 1 / 4;

Correct! A 3-column grid has 4 dividing lines. This tells the item to start at Line 1 (far left) and stretch until it hits Line 4 (far right).