Lesson 4.8 – CSS Grid Introduction

🎨 Creating Professional Two-Dimensional Layouts Using CSS Grid

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand CSS Grid

✅ Create Rows and Columns

✅ Build Two-Dimensional Layouts

✅ Create Professional Website Structures

✅ Use Grid Container and Grid Items

✅ Create Responsive Grids

✅ Build Dashboards and Galleries

📖 Introduction

In the previous lessons, we learned:

📦 Flexbox

Flexbox is excellent for:

One-Dimensional Layouts

Meaning:

Row

OR

Column

Example:

HTML CSS JS

One row.

But modern websites often need:

+----------+----------+

| Header            |

+----------+----------+

| Sidebar | Content  |

+----------+----------+

| Footer            |

+----------+----------+

This requires:

Rows + Columns Together

For this we use:

🏗️ CSS Grid

🤔 What is CSS Grid?

CSS Grid is a layout system that allows us to create:

✅ Rows

✅ Columns

✅ Complete Webpage Layouts

Flexbox:

One Direction

Grid:

Two Directions

Rows + Columns

🌟 Why Use CSS Grid?

CSS Grid helps create:

✅ Website Layouts

✅ Dashboards

✅ Admin Panels

✅ Photo Galleries

✅ Product Grids

✅ Portfolio Websites

🎯 Grid Terminology

CSS Grid has:

Grid Container

Parent Element

Grid Items

Child Elements

Example

HTML

<div class="container">

<div>HTML</div>

<div>CSS</div>

<div>JavaScript</div>

</div>

Container:

<div class="container">

Items:

<div>HTML</div>

<div>CSS</div>

<div>JavaScript</div>

🎯 Creating a Grid Container

Use:

display:grid;

Example

.container{

display:grid;

}

Now the container becomes a Grid Container.

🌟 Grid Columns

Columns are created using:

grid-template-columns;

Example

.container{

display:grid;

grid-template-columns:200px 200px 200px;

}

Meaning:

Column 1 = 200px

Column 2 = 200px

Column 3 = 200px

Output

+------+ +------+ +------+

 HTML     CSS      JS

+------+ +------+ +------+

Example Program

HTML

<div class="container">

<div class="box">HTML</div>

<div class="box">CSS</div>

<div class="box">JS</div>

</div>

CSS

.container{

display:grid;

grid-template-columns:200px 200px 200px;

}

🎯 Grid Rows

Rows are created using:

grid-template-rows;

Example

.container{

grid-template-rows:100px 100px;
}

Meaning:

Row 1 = 100px

Row 2 = 100px

🌟 Fraction Unit (fr)

Very important Grid unit.

Instead of:

200px 200px 200px

Use:

1fr 1fr 1fr

Example

.container{

display:grid;

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

}

Meaning:

Divide available space equally
into 3 columns.

Output

HTML     CSS     JS

Equal width columns.

More Examples

Two Equal Columns

grid-template-columns:1fr 1fr;

Three Equal Columns

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

Four Equal Columns

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

🎯 Unequal Columns

Example

grid-template-columns:2fr 1fr;

Meaning

Column 1 = 2 Parts

Column 2 = 1 Part

Output

+------------------+

|      Content     |

+--------+

| Sidebar|

+--------+

🌟 Gap Property

Creates spacing between grid items.

Syntax

gap:value;

Example

gap:20px;

Result

20px space between boxes.

Example

.container{

display:grid;

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

gap:20px;

}

Output

HTML     CSS     JS

with spacing.

🎯 Creating a 2×2 Grid

HTML

<div class="container">

<div>HTML</div>

<div>CSS</div>

<div>JS</div>

<div>React</div>

</div>

CSS

.container{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

Output

HTML     CSS

JS       React

🎯 Creating a 3×2 Grid

CSS

.container{

display:grid;

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

gap:20px;

}

Output

HTML     CSS      JS

React    Python   Bootstrap

🌟 Grid Item Styling

CSS

.box{

background-color:lightblue;

padding:20px;

border:2px solid blue;

text-align:center;

}

Result

Professional grid cards.

🎯 Complete Example

HTML

<div class="container">

<div class="box">HTML</div>

<div class="box">CSS</div>

<div class="box">JavaScript</div>

<div class="box">React</div>

<div class="box">Python</div>

<div class="box">Bootstrap</div>

</div>

CSS

.container{

display:grid;

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

gap:20px;

}

.box{

background-color:lightyellow;

border:2px solid orange;

padding:20px;

text-align:center;

}

🎯 Expected Output

HTML      CSS      JS

React     Python   Bootstrap

Professional grid layout.

🌟 Website Layout Example

HTML

<div class="container">

<header>Header</header>

<aside>Sidebar</aside>

<main>Content</main>

<footer>Footer</footer>

</div>

CSS

.container{

display:grid;

grid-template-columns:1fr 3fr;

gap:20px;

}

Layout

Header

Sidebar   Content

Footer

🎯 Auto-Fit Responsive Grid

Professional technique.

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

Meaning:

Create as many columns
as possible.

Minimum = 200px

Maximum = 1fr

Result

Responsive layout.

💻 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<div class="box">HTML</div>

<div class="box">CSS</div>

<div class="box">JavaScript</div>

<div class="box">React</div>

<div class="box">Bootstrap</div>

<div class="box">Python</div>

</div>

</body>

</html>

CSS

.container{

display:grid;

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

gap:20px;

}

.box{

background-color:lightblue;

border:2px solid blue;

padding:20px;

text-align:center;

font-size:20px;

}

🏫 Real World Examples

Product Gallery

display:grid;

Course Cards

display:grid;

Admin Dashboard

display:grid;

Portfolio Projects

display:grid;

College Website Layout

display:grid;

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting Display Grid

Wrong:

grid-template-columns:1fr 1fr;

No effect.

Correct:

display:grid;

Mistake 2

Using Too Many Fixed Widths

Wrong:

grid-template-columns:
200px 200px 200px;

Not responsive.

Better:

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

Mistake 3

No Gap

Cards stick together.

Use:

gap:20px;

🌟 Best Practices

✅ Use fr units.

✅ Use gap for spacing.

✅ Use Grid for two-dimensional layouts.

✅ Use responsive grids.

✅ Keep layouts simple.

🏆 Mini Project – Course Grid

Create:

HTML

CSS

JavaScript

React

Bootstrap

Python

Display them in a:

3 × 2 Grid

Apply:

✅ display:grid

✅ gap:20px

✅ colors

✅ borders

📝 Practical Activity

Create a:

Course Section

with six course cards.

Arrange them using:

display:grid;

and:

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

📋 Assignment

Assignment 4.8

1. What is CSS Grid?
2. What is a Grid Container?
3. What are Grid Items?
4. What does display:grid do?
5. What is grid-template-columns?
6. What is 1fr?
7. Create a 3-column Grid Layout.

🧠 Quiz

Q1. Which property enables Grid?

A. display:flex

B. display:grid

C. display:block

D. display:inline

✅ Answer: B

Q2. Which property creates columns?

A. grid-columns

B. grid-template-columns

C. column-grid

D. template-columns

✅ Answer: B

Q3. What does 1fr mean?

A. 1 Pixel

B. 1 Row

C. 1 Fraction of Available Space

D. 1 Grid

✅ Answer: C

Q4. Which property creates spacing between grid items?

A. margin

B. padding

C. gap

D. border

✅ Answer: C

Q5. CSS Grid is mainly used for?

A. Text Styling

B. Two-Dimensional Layouts

C. Colors

D. Images

✅ Answer: B

📌 Lesson Summary

✅ CSS Grid creates powerful two-dimensional layouts.

✅ display:grid creates a Grid Container.

✅ grid-template-columns defines columns.

✅ grid-template-rows defines rows.

✅ fr units create flexible layouts.

✅ gap creates spacing between items.

✅ CSS Grid is widely used in modern websites and dashboards.