Responsive Layouts with CSS Grid | Lecture 44

Let’s begin with Lecture 44 of the HTML5 & CSS3 series. Responsive Layouts with CSS Grid & Flexbox – Combining Their Powers. This lecture is for absolute beginners; even kids can follow along and understand.

Table of Contents

🎯 Objective:

By the end of this lecture, you will:

Understand how to combine Flexbox and CSS Grid in one layout
Know when to use each for different parts of a page
Be able to create complex responsive layouts
Build a real dashboard layout , product grid , or responsive blog layout
Make your site adapt beautifully to all screen sizes!

🔗 Why Combine Flexbox and Grid?

Flexbox is great for:

One-dimensional layouts (rows or columns)
Navigation bars, buttons, cards, forms

Grid shines at:

Two-dimensional layouts (rows AND columns)
Dashboards, galleries, landing pages

Think of it like this:

If Flexbox is your magic wand for alignment , then Grid is your blueprint for complex structures — and together, they’re unstoppable! 🦸‍♂️🧱

📐 When to Use Which?

TASK	BEST TOOL
Aligning items in a row/column	✅ Flexbox
Creating multi-column layouts	✅ Grid
Making a horizontal navbar	✅ Flexbox
Building a dashboard with sidebar and content	✅ Grid inside Flexbox
Arranging cards in a flexible list	✅ Flexbox inside Grid

You can use both together in the same layout — no rules say you have to choose just one!

💻 Try This: Build a Responsive Dashboard Layout

Let’s create a responsive admin dashboard using both Flexbox and Grid .

Step 1: Create a New File

In your VS Code project folder (MyFirstWebsite), create a new file named:

flexgrid-dashboard.html

Step 2: Add This Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Responsive Dashboard</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --bg-color: #f4f4f4;
            --card-bg: white;
            --spacing-sm: 10px;
            --spacing-md: 20px;
            --spacing-lg: 40px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: var(--bg-color);
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: white;
            padding: var(--spacing-lg);
        }

        .content {
            flex: 1;
            padding: var(--spacing-lg);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-lg);
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--spacing-md);
        }

        .card {
            background-color: var(--card-bg);
            padding: var(--spacing-md);
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

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

            .sidebar {
                width: 100%;
                order: -1; /* Show sidebar above content on small screens */
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- Sidebar -->
        <div class="sidebar">
            <h2>Dashboard Menu</h2>
            <ul style="list-style: none; padding: 0;">
                <li><a href="#" style="color: white; text-decoration: none;">Home</a></li>
                <li><a href="#" style="color: white; text-decoration: none;">Profile</a></li>
                <li><a href="#" style="color: white; text-decoration: none;">Settings</a></li>
            </ul>
        </div>

        <!-- Main Content Area -->
        <div class="content">
            <!-- Header -->
            <div class="header">
                <h1>Welcome, Alex!</h1>
                <button style="background-color: var(--secondary-color); color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Logout</button>
            </div>

            <!-- Cards Section -->
            <div class="cards">
                <div class="card">
                    <h3>Users</h3>
                    <p>Total: 1,234</p>
                </div>
                <div class="card">
                    <h3>Sales</h3>
                    <p>This week: $2,300</p>
                </div>
                <div class="card">
                    <h3>Tasks</h3>
                    <p>Pending: 15</p>
                </div>
                <div class="card">
                    <h3>Messages</h3>
                    <p>New: 8</p>
                </div>
            </div>
        </div>
    </div>

    <p style="text-align: center; margin-top: 30px;"><a href="index.html">Back to Home</a></p>

</body>
</html>

Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve built a responsive dashboard layout where:

The sidebar uses Flexbox for vertical layout
The cards section uses Grid for responsive columns
The whole layout adapts to mobile by switching to a single column

💡 Bonus: Make the Card Hover Grow and Change Color

Add this CSS:

.card:hover {
    transform: scale(1.05);
    background-color: #ecf0f1;
}

Now your cards zoom in slightly when hovered — smooth and modern!

💡 Bonus: Add a Toggle Button for Mobile Sidebar

Update your sidebar and add a toggle button using JavaScript.

Add HTML Before `.container`:

<!-- Mobile Menu Toggle -->
<button id="menuToggle" style="display: none; position: fixed; top: 10px; left: 10px; z-index: 1000; background-color: var(--primary-color); color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer;">☰ Menu</button>

Add JavaScript:

<script>
    document.getElementById("menuToggle").addEventListener("click", function () {
        document.querySelector(".sidebar").classList.toggle("mobile-show");
    });
</script>

Update CSS:

@media (max-width: 768px) {
    .menuToggle { display: block; }

    .sidebar {
        position: absolute;
        top: 0;
        left: -250px;
        height: 100vh;
        transition: left 0.3s ease;
    }

    .sidebar.mobile-show {
        left: 0;
    }
}

Now users can open/close the sidebar on mobile — even cooler!

🧪 Try It Yourself!

Add a footer using flex and grid-area together.
Style the cards differently using nth-child() or @keyframes
Add a dark mode toggle that changes theme colors using JavaScript
Make the sidebar menu items expandable with submenus using JS

✅ Summary of What You Learned Today

CONCEPT	DESCRIPTION
Flexbox	Perfect for aligning and spacing items in one direction
Grid	Ideal for full-page layouts with rows and columns
Combining Both	Use Flexbox for nav, header, or footer — Grid for main content
Responsive Design	Use`auto-fit`,`minmax()`, and media queries
Mobile First Approach	Start designing for phones, then scale up
Layout Switching	On smaller screens, switch from side-by-side to stacked layout

🚀 Next Lecture Preview:

In Lecture 45 , we’ll explore CSS frameworks like Bootstrap and Tailwind CSS — so you can build beautiful, responsive websites faster using ready-made components and utilities!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series