Responsive Layout using Flexbox & Grid

· CSS3 Module
Modern websites are like water — they must flow smoothly into every screen size.
A website should look beautiful on a mobile phone, balanced on a tablet, and powerful on a desktop.
This is called Responsive Web Design.

In this practical project, students will learn how to create a professional responsive layout using:

  • Flexbox
  • CSS Grid
  • Media Queries
  • Responsive Design Principles

1. What is a Responsive Layout?

A responsive layout automatically adjusts according to screen size.

Real-Life Example

Think about water in different containers:

  • In a glass → it becomes tall
  • In a bowl → it becomes wide
  • In a bottle → it becomes narrow

Similarly:

  • On mobile → website becomes vertical
  • On tablet → medium spacing
  • On desktop → wider layout

2. Project Goal

We will create a simple professional webpage containing:

  • Header
  • Navigation Bar
  • Sidebar
  • Main Content
  • Cards Section
  • Footer

The layout will change automatically for:

  • Mobile
  • Tablet
  • Desktop

3. Concepts Used

A. Flexbox

What is Flexbox?

Flexbox is a one-dimensional layout system.

It arranges items:

  • Horizontally OR
  • Vertically

Real-Life Example

Imagine students sitting in a row.

Teacher can control:

  • spacing
  • direction
  • alignment
  • order

Flexbox works similarly.

Why Flexbox is Useful?

Flexbox is perfect for:

  • Navigation bars
  • Menus
  • Buttons
  • Centering items
  • Small layouts

Important Flexbox Properties

Property Purpose
display:flex Activates flexbox
flex-direction Row or column
justify-content Horizontal alignment
align-items Vertical alignment
gap Space between items
flex-wrap Allows wrapping

Example 1 — Basic Flexbox

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

.container{
  display:flex;
  gap:20px;
}

.box{
  width:100px;
  height:100px;
  background:orange;
}

Output Logic

Items appear in a row:

[1] [2] [3]

Because:

display:flex;

changes normal block behavior into flexible row layout.

Example 2 — Center Items

.container{
  display:flex;
  justify-content:center;
  align-items:center;
  height:300px;
}

Logic

Property Effect
justify-content:center Horizontal center
align-items:center Vertical center

B. CSS Grid

What is Grid?

Grid is a two-dimensional layout system.

It controls:

  • Rows AND
  • Columns

Real-Life Example

Think about newspaper layout.

Different boxes arranged in rows and columns.

That is Grid.

Why Grid is Powerful?

Grid is perfect for:

  • Website layouts
  • Gallery sections
  • Dashboard designs
  • Card layouts

Important Grid Properties

Property Purpose
display:grid Activates grid
grid-template-columns Creates columns
gap Space between items
grid-column Span columns
grid-row Span rows

Example — Basic Grid

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

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

.item{
  background:skyblue;
  padding:30px;
}

Output Logic

Creates:

[1] [2]
[3] [4]

Because:

repeat(2,1fr)

means:

  • 2 equal columns
  • each takes equal width

C. Media Queries

What are Media Queries?

Media queries apply different CSS for different screen sizes.

Real-Life Example

Clothing changes according to weather:

  • Summer → light clothes
  • Winter → warm clothes

Similarly:

  • Mobile → smaller layout
  • Desktop → larger layout

Syntax

@media(max-width:768px){

}

Meaning: Apply CSS when screen width is 768px or smaller.

Example

.container{
  display:flex;
}

@media(max-width:768px){
  .container{
    flex-direction:column;
  }
}

Logic

Desktop:

[1] [2] [3]

Mobile:

[1]
[2]
[3]

Because layout changes from:

row → column

D. Responsive Design

What is Responsive Design?

Responsive design means:

Website adjusts beautifully on all devices.

Devices Covered

Device Approx Width
Mobile Below 768px
Tablet 768px–1024px
Desktop Above 1024px

Why Responsive Design is Important?

Today most users use smartphones.

If website:

  • breaks
  • overlaps
  • becomes unreadable

users leave immediately.

Professional websites MUST be responsive.

4. Full Practical Project

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
  <h1>My Website</h1>
</header>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

<div class="container">

  <aside>
    Sidebar
  </aside>

  <main>

    <section class="cards">

      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>

    </section>

  </main>

</div>

<footer>
  Footer Section
</footer>

</body>
</html>

CSS Styling

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial;
}

header,
footer{
  background:black;
  color:white;
  text-align:center;
  padding:20px;
}

nav{
  display:flex;
  justify-content:center;
  gap:20px;
  background:gray;
  padding:15px;
}

nav a{
  color:white;
  text-decoration:none;
}

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

aside{
  background:#f0f0f0;
  padding:20px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.card{
  background:skyblue;
  padding:50px;
  text-align:center;
  border-radius:10px;
}

/* Tablet */
@media(max-width:992px){

  .container{
    grid-template-columns:1fr;
  }

}

/* Mobile */
@media(max-width:768px){

  nav{
    flex-direction:column;
    align-items:center;
  }

  .cards{
    grid-template-columns:1fr;
  }

}

5. Step-by-Step Logic

Step 1 — Reset CSS

*{
  margin:0;
  padding:0;
}

Removes default browser spacing.

Step 2 — Navbar using Flexbox

nav{
  display:flex;
}

Navigation links appear in row.

Step 3 — Main Layout using Grid

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

Creates:

  • Sidebar → 250px
  • Content → remaining width

Step 4 — Cards using Grid

.cards{
  grid-template-columns:repeat(2,1fr);
}

Creates 2 equal columns.

Step 5 — Mobile Responsive

@media(max-width:768px)

When screen becomes small:

  • navbar becomes vertical
  • cards become single column

6. Visual Layout Understanding

Desktop Layout

--------------------------------
HEADER
--------------------------------

HOME ABOUT SERVICES CONTACT

--------------------------------
SIDEBAR | CARD1 | CARD2
        | CARD3 | CARD4
--------------------------------

FOOTER
--------------------------------

Mobile Layout

HEADER

HOME
ABOUT
SERVICES
CONTACT

SIDEBAR

CARD1
CARD2
CARD3
CARD4

FOOTER

7. Difference Between Flexbox & Grid

Flexbox Grid
One-dimensional Two-dimensional
Row OR Column Rows AND Columns
Best for small layouts Best for full layouts
Easier alignment Powerful structure

8. Common Beginner Mistakes

Mistake Problem
Forgetting box-sizing Layout breaks
Using fixed width Bad responsiveness
No media queries Mobile issues
Too much margin Overflow problem

9. Professional Tips

Use Flexbox For

  • Navbar
  • Buttons
  • Menus
  • Alignment

Use Grid For

  • Website structure
  • Cards
  • Galleries
  • Dashboards

Always Test On

  • Mobile
  • Tablet
  • Desktop

10. Real-World Usage

Responsive layouts are used in:

  • YouTube
  • Facebook
  • Amazon
  • Netflix

Every modern website depends on:

  • Flexbox
  • Grid
  • Media Queries

11. Learning Outcome

After completing this project students will be able to:

✅ Create responsive websites
✅ Use Flexbox professionally
✅ Build layouts using CSS Grid
✅ Apply media queries correctly
✅ Design mobile-friendly interfaces
✅ Understand professional web structure
✅ Build modern UI layouts confidently

Final Understanding

Flexbox teaches alignment.
Grid teaches structure.
Media queries teach adaptability.
Responsive design teaches professionalism.

A developer who understands these four concepts can transform simple webpages into living, breathing modern websites — beautiful on every screen, elegant on every device.

List of Modules

Anas Khan
Written by