Grid Layout in CSS

· CSS3 Module

Introduction to CSS Grid

Before CSS Grid, web developers used:

  • Float
  • Positioning
  • Flexbox
  • Tables

to create layouts.

But these methods had limitations.

Then came CSS Grid Layout — a powerful system made specially for creating webpage layouts easily and professionally.

CSS Grid is a two-dimensional layout system.

That means:

  • It controls rows
  • AND columns together.

Flexbox works in one direction only:

  • Row OR column

But Grid works in:

  • Rows + Columns at the same time.

Think of Grid like:

  • A chess board
  • A newspaper layout
  • Tiles in a photo gallery
  • Seats in a classroom

Everything is arranged in rows and columns.

Why CSS Grid is Important

CSS Grid helps developers:

✅ Build complex layouts quickly
✅ Create responsive designs
✅ Reduce extra code
✅ Align items perfectly
✅ Make professional dashboards and websites

Real Life Example

Imagine a school classroom.

The classroom has:

  • Rows
  • Columns
  • Students sitting in boxes

That is exactly how CSS Grid works.

Each student = Grid Item
Classroom = Grid Container

How CSS Grid Works

CSS Grid has 2 main parts:

Part Meaning
Grid Container Parent element
Grid Items Child elements inside container

1. Grid Container

The parent element becomes a grid container using:

display: grid;

Example

<div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

.container{
    display:grid;
}

Now the container becomes a grid system.

Logic Behind Grid Container

When we write:

display:grid;

the browser says:

“Now I will arrange child elements in rows and columns.”

2. Grid Items

The elements inside grid container are called grid items.

Example:

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Here:

  • container = Grid Container
  • all divs inside = Grid Items

Real Life Example

Think of a biscuit tray.

  • Tray = Grid Container
  • Biscuits = Grid Items

3. Grid Columns & Rows

This is the heart of CSS Grid.

We define:

  • Number of columns
  • Number of rows

using:

grid-template-columns
grid-template-rows

Grid Columns

Example

.container{
    display:grid;
    grid-template-columns: 200px 200px 200px;
}

This creates:

  • 3 columns
  • Each 200px wide

Visual Understanding

| 200px | 200px | 200px |

Another Example

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

What is fr?

fr means:

Fraction of available space

Example Logic

Suppose screen width = 900px

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

Browser divides space equally:

300px | 300px | 300px

Unequal Columns

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

Meaning:

  • Middle column gets more space

Example:

200px | 400px | 200px

Real Life Example

Like:

  • Small sidebar
  • Large content area
  • Small ads section

Used in blogs and dashboards.

Grid Rows

Rows work similarly.

grid-template-rows: 100px 200px;

Creates:

  • First row = 100px
  • Second row = 200px

Full Example

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

.container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 100px;
}

Output Layout

| 1 | 2 |
| 3 | 4 |

Perfect 2×2 grid.

4. Grid Gap

Gap creates spacing between grid items.

Example

gap:20px;

This adds:

  • Horizontal spacing
  • Vertical spacing

Full Example

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

Real Life Example

Like tiles on a floor.

Without gap:

  • Tiles stick together

With gap:

  • Proper spacing looks beautiful

Separate Row & Column Gap

row-gap:20px;
column-gap:10px;

5. Grid Template Areas

This is one of the most powerful features.

It allows naming parts of layout.

Example Layout

Suppose webpage has:

  • Header
  • Sidebar
  • Main Content
  • Footer

HTML

<div class="container">

   <header>Header</header>
   <aside>Sidebar</aside>
   <main>Main Content</main>
   <footer>Footer</footer>

</div>

CSS

.container{
    display:grid;

    grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Assign Area Names

header{
    grid-area:header;
}

aside{
    grid-area:sidebar;
}

main{
    grid-area:main;
}

footer{
    grid-area:footer;
}

Visual Structure

| Header  Header |

| Sidebar Main   |

| Footer  Footer |

Why Template Areas are Amazing

Without Grid:

  • Layout coding becomes difficult

With Grid:

  • Layout becomes visual and readable

Even beginners can understand structure quickly.

6. Building Layouts Using Grid

Now let’s build a real website layout.

Example – Website Layout

HTML

<div class="container">

    <header>Header</header>
    <nav>Navbar</nav>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>

</div>

CSS

.container{
    display:grid;

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

    grid-template-areas:

    "header header header"
    "nav nav nav"
    "main main sidebar"
    "footer footer footer";

    gap:20px;
}

header{
    grid-area:header;
    background:orange;
}

nav{
    grid-area:nav;
    background:lightblue;
}

main{
    grid-area:main;
    background:lightgreen;
}

aside{
    grid-area:sidebar;
    background:pink;
}

footer{
    grid-area:footer;
    background:gray;
}

Layout Visualization

--------------------------------
|           Header            |
--------------------------------
|            Nav              |
--------------------------------
|     Main      |  Sidebar    |
--------------------------------
|           Footer            |
--------------------------------

Real Websites Using Grid

CSS Grid is used in:

  • Admin dashboards
  • News portals
  • E-commerce websites
  • Portfolio websites
  • Image galleries
  • Analytics panels

Grid vs Flexbox

Flexbox Grid
One-dimensional Two-dimensional
Row OR Column Row AND Column
Good for alignment Good for layouts
Simpler More powerful

When to Use Flexbox

Use Flexbox for:

  • Navbar
  • Buttons alignment
  • Small components

When to Use Grid

Use Grid for:

  • Full webpage layout
  • Dashboard
  • Gallery
  • Complex sections

Combination of Grid + Flexbox

Professional developers use both together.

Example:

  • Grid for page structure
  • Flexbox inside components

This is modern web development strategy.

Common Beginner Mistakes

1. Forgetting display:grid

Without it:

  • Grid properties won’t work.

2. Wrong Column Sizes

Example:

grid-template-columns:500px 500px 500px;

on small screens causes overflow.

Better:

1fr 1fr 1fr

3. Too Much Gap

Huge gap makes layout look broken.

Always balance spacing.

Responsive Grid Example

.container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap:20px;
}

What This Does

  • Automatically adjusts columns
  • Responsive on all devices
  • Used in modern galleries/cards

Real Life Example

Like arranging books on shelves.

If shelf space reduces:

  • Books automatically adjust.

That is responsive grid magic.

Learning Outcome

After completing this module, students will be able to:

✅ Understand CSS Grid system
✅ Create rows and columns
✅ Use grid container and grid items
✅ Add spacing using gap
✅ Build structured webpage layouts
✅ Create responsive modern designs
✅ Design professional two-dimensional layouts easily

Final Summary

CSS Grid is the king of layout systems in modern web development.

It transforms messy layout coding into:

  • clean structure
  • visual control
  • responsive design
  • professional UI development

A beautiful website is not built only with colors and fonts.

It is built on structure.

And CSS Grid is the architecture of that structure — like the silent geometry behind a grand mosque dome or the measured symmetry of ancient calligraphy. Clean lines. Balanced spaces. Purpose in every block.

List of Modules

Anas Khan
Written by