CSS Flexbox & Grid 2026 — Complete Tutorial

1

Step 01

CSS Layout kya hoti hai?

Pehle CSS mein layout banana bahut mushkil tha — log float aur position use karte the jo confusing hota tha. Lekin ab hamare paas do amazing tools hain:

↔️

Flexbox

Ek direction mein layout — row ya column. Navbar, cards, buttons ke liye perfect.

⊞

CSS Grid

Row aur column dono mein layout. Puri page structure, dashboard, gallery ke liye best.

Simple rule: Ek line mein cheezein rakhni hain? → Flexbox. Puri page ka layout banana hai (rows + columns)? → Grid.

2

Step 02

Flexbox Basics

Flexbox sirf ek property se start hota hai: display: flex. Yeh parent element par lagao aur us ke andar ke sab elements automatic ek line mein aa jaate hain!

Flexbox Start

/* Parent ko flex banao */
.container {
    display: flex;   /* Yeh hai magic line! */
    gap: 16px;       /* Items ke beech space */
}

/* Children automatic flex items ban jaate hain */
.container .item {
    background: teal;
    padding: 20px;
    border-radius: 8px;
    color: white;
}

Live Demo — Bina Flex vs Flex ke saath

❌ Bina display:flex — sab neeche neeche:

Box 1

Box 2

Box 3

✅ display:flex ke saath — sab ek line mein:

Box 1

Box 2

Box 3

3

Step 03

Flex Properties — Sab Control Karein

Flexbox mein kai properties hain jo aapko exact control deti hain. Inhe ek ek dekhtey hain live demos ke saath:

1. flex-direction — Kaunsi taraf?

flex-direction Demo

flex-direction: row (default) — left se right:

A

B

C

flex-direction: column — upar se neeche:

A

B

C

2. justify-content — Horizontal alignment

justify-content Demo

justify-content: flex-start (default):

1

2

3

justify-content: center:

1

2

3

justify-content: space-between:

1

2

3

justify-content: flex-end:

1

2

3

3. flex — Item kitna space le?

flex property

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

/* flex: 1 — barabar space lo */
.item { flex: 1; }

/* flex: 2 — double space lo */
.item.big { flex: 2; }

/* Navbar example */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #1e3a8a;
}

flex: 1 vs flex: 2

flex: 1

flex: 2 (double!)

flex: 1

Quick Quiz!

Flexbox items ko horizontally center karne ke liye kaunsi property use hogi?

A align-items: center

B justify-content: center

C text-align: center

D margin: auto

4

Step 04

Interactive Flexbox Playground

Yeh ek live playground hai — properties badlein aur dekho kya hota hai! Yeh seekhne ka sabse acha tarika hai.

Flexbox Playground

flex-direction

justify-content

align-items

gap

Box 1

Box 2

Box 3

Box 4

                        .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 8px; }
                    

5

Step 05

CSS Grid Basics

Grid aapko rows aur columns dono mein control deta hai — bilkul ek Excel spreadsheet ki tarah. Complex page layouts ke liye yeh perfect hai.

CSS Grid Start

.container {
    display: grid;

    /* 3 equal columns banao */
    grid-template-columns: 1fr 1fr 1fr;

    /* Ya shorthand: */
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;   /* Rows aur columns ke beech space */
}

/* Mixed columns — sidebar + main */
.layout {
    display: grid;
    grid-template-columns: 250px 1fr;   /* Sidebar fixed, main flexible */
    gap: 24px;
}

Grid demos — Live dekho

Grid Layout Demos

grid-template-columns: 1fr 1fr — 2 equal columns:

Col 1

Col 2

Col 3

Col 4

grid-template-columns: 1fr 1fr 1fr — 3 equal columns:

1

2

3

4

5

6

grid-template-columns: 2fr 1fr — mixed size:

Main Content (2fr)

Sidebar (1fr)

Full page layout — header, sidebar, content, footer:

📄 Main Content

grid-column: span — Multiple columns cover karo

Spanning Columns

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

/* Header — sab columns cover karo */
.header {
    grid-column: 1 / -1;   /* Start to end */
}

/* Ya span use karo */
.wide-item {
    grid-column: span 2;  /* 2 columns cover karo */
}

Quick Quiz!

CSS Grid mein 4 equal columns banana ho to kaunsi property likhein ge?

A grid-columns: 4

B columns: repeat(4, equal)

C grid-template-columns: repeat(4, 1fr)

D display: grid-4

6

Step 06

Grid vs Flexbox — Kab kya use karein?

Yeh sawal aksar puchha jaata hai. Simple jawab yeh hai:

Situation	Use Karein	Example
Navigation bar	Flexbox	Logo left, links right mein
Button group	Flexbox	Buttons ek line mein
Card row	Flexbox	3 cards side by side
Vertically center karna	Flexbox	align-items: center
Full page layout	Grid	Header, sidebar, content, footer
Photo gallery	Grid	4-column image grid
Dashboard	Grid	Widgets, charts, stats
Complex layout	Grid	Rows + columns dono

Pro Tip: Flexbox aur Grid saath bhi use hote hain! Grid se overall page structure banao, phir us ke andar Flexbox se chote components align karo. Yahi real websites mein hota hai!

7

Step 07 — Final Project

Complete Responsive Page Banayein

Ab hum ek complete page banayenge jisme Grid se overall layout aur Flexbox se navbar aur cards banayenge. Yeh ek real website jaisi hogi!

🎯 Aaj ka Project: Services Page

Is project mein aap banayenge:

✓ Navbar (Flexbox) ✓ Hero Section ✓ 3-Column Cards (Grid) ✓ Sidebar Layout (Grid) ✓ Footer (Flexbox) ✓ Responsive Design

Complete Services Page — Copy & Paste Ready!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meri Services</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:Arial,sans-serif; background:#f8fafc; color:#334155; }

        /* ===== NAVBAR — Flexbox ===== */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #1e3a8a;
            padding: 16px 32px;
            color: white;
        }
        .nav-links {
            display: flex;
            gap: 24px;
            list-style: none;
        }
        .nav-links a { color: rgba(255,255,255,.85); text-decoration: none; }

        /* ===== HERO ===== */
        .hero {
            background: linear-gradient(135deg, #1e3a8a, #7c3aed);
            color: white;
            text-align: center;
            padding: 64px 32px;
        }
        .hero h1 { font-size: 2.5rem; margin-bottom: 16px; }

        /* ===== CARDS — CSS Grid ===== */
        .cards-section { padding: 48px 32px; }
        .cards-section h2 { text-align: center; margin-bottom: 32px; font-size: 1.8rem; color: #1e3a8a; }
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .card {
            background: white;
            border-radius: 12px;
            padding: 28px;
            box-shadow: 0 2px 12px rgba(0,0,0,.06);
            text-align: center;
        }
        .card-icon {
            font-size: 2.5rem;
            margin-bottom: 16px;
            display: block;
        }
        .card h3 { color: #1e3a8a; margin-bottom: 10px; }

        /* ===== SIDEBAR LAYOUT — CSS Grid ===== */
        .content-area {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 32px;
            padding: 0 32px 48px;
        }
        .main-content { background: white; border-radius: 12px; padding: 28px; }
        .sidebar-box {
            background: linear-gradient(135deg, #0d9488, #7c3aed);
            border-radius: 12px;
            padding: 28px;
            color: white;
        }

        /* ===== FOOTER — Flexbox ===== */
        footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #0f172a;
            color: rgba(255,255,255,.7);
            padding: 24px 32px;
            font-size: 14px;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .cards-grid { grid-template-columns: 1fr; }
            .content-area { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            footer { flex-direction: column; gap: 12px; }
        }
    </style>
</head>
<body>

<!-- NAVBAR — Flexbox -->
<nav>
    <div style="font-weight:bold;font-size:1.2rem">⚡ MyBrand</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<!-- HERO -->
<div class="hero">
    <h1>Hamari Services</h1>
    <p>CSS Flexbox aur Grid ke saath banaya gaya layout</p>
</div>

<!-- 3 CARDS — CSS Grid -->
<div class="cards-section">
    <h2>Hamaray Kaam</h2>
    <div class="cards-grid">
        <div class="card">
            <span class="card-icon">🌐</span>
            <h3>Web Design</h3>
            <p>Khoobsurat websites banate hain</p>
        </div>
        <div class="card">
            <span class="card-icon">📱</span>
            <h3>Mobile Apps</h3>
            <p>Android aur iOS apps develop karte hain</p>
        </div>
        <div class="card">
            <span class="card-icon">🔍</span>
            <h3>SEO Services</h3>
            <p>Google ranking improve karte hain</p>
        </div>
    </div>
</div>

<!-- SIDEBAR LAYOUT — CSS Grid -->
<div class="content-area">
    <div class="main-content">
        <h2>Hamare Baare Mein</h2>
        <p>Hum Pakistan ke best web developers hain. Grid
        aur Flexbox dono use karke hamaray layouts
        bilkul responsive hote hain.</p>
    </div>
    <div class="sidebar-box">
        <h3>Quick Links</h3>
        <p>CSS Flexbox Guide</p>
        <p>CSS Grid Tutorial</p>
    </div>
</div>

<!-- FOOTER — Flexbox -->
<footer>
    <span>© 2026 MyBrand. All rights reserved.</span>
    <div style="display:flex;gap:20px">
        <a href="#" style="color:inherit">Privacy</a>
        <a href="#" style="color:inherit">Terms</a>
    </div>
</footer>

</body>
</html>

Mubarak ho! 🎉 Aapne Flexbox aur Grid dono seekh liye! Yeh code services.html mein save karein aur browser mein kholein — aik poori real website dikhegi!

Agle Tutorials

Web development series ka agle part dekhein:

← Part 1: HTML & CSS Basics

Dobara review karein

Part 3: JavaScript →

Website ko interactive banayein

Master CSS Flexbox & Grid in 2026

CSS Layout kya hoti hai?

Flexbox

CSS Grid

Flexbox Basics

Flex Properties — Sab Control Karein

1. flex-direction — Kaunsi taraf?

2. justify-content — Horizontal alignment

3. flex — Item kitna space le?

Quick Quiz!

Interactive Flexbox Playground

Flexbox Playground

CSS Grid Basics

Grid demos — Live dekho

grid-column: span — Multiple columns cover karo

Quick Quiz!

Grid vs Flexbox — Kab kya use karein?

Complete Responsive Page Banayein

🎯 Aaj ka Project: Services Page

Agle Tutorials

← Part 1: HTML & CSS Basics

Part 3: JavaScript →