CSSmarkup~30 mins

Grid vs flexbox in CSS - Hands-On Comparison

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Responsive Layout Using CSS Grid and Flexbox

📖 Scenario: You are building a simple webpage layout that adjusts nicely on different screen sizes. You will use CSS Grid for the main page structure and Flexbox for arranging items inside a section.

🎯 Goal: Build a responsive webpage layout with a header, main content area, and footer using CSS Grid. Inside the main content, use Flexbox to arrange three boxes side by side that wrap on smaller screens.

📋 What You'll Learn

Use CSS Grid to create a page layout with three rows: header, main, and footer

Set the grid rows so the header and footer have fixed height and main fills remaining space

Inside the main area, use Flexbox to arrange three colored boxes horizontally

Make the boxes wrap to the next line on narrow screens

Add spacing between boxes using Flexbox gap property

💡 Why This Matters

🌍 Real World

Web developers often combine CSS Grid and Flexbox to build responsive page layouts that adapt to different screen sizes and devices.

💼 Career

Understanding when to use Grid for overall page structure and Flexbox for arranging items inside containers is a key skill for front-end web developers.

Progress0 / 4 steps

Set up the HTML structure with semantic elements

Write the HTML code to create a <header>, <main>, and <footer> inside the <body>. Inside <main>, add three <div> elements with classes box1, box2, and box3.

CSS




    
    
    Grid vs Flexbox Layout

Need a hint?

Use semantic tags <header>, <main>, and <footer>. Inside <main>, add three <div> elements with the exact classes box1, box2, and box3.

Create a CSS Grid layout for the page

Add CSS inside a <style> tag in the <head>. Use display: grid; on the body. Define grid-template-rows with 60px for header, 1fr for main, and 40px for footer. Also set height: 100vh; on body.

CSS




    
    
    Grid vs Flexbox Layout
    
        /* Add CSS Grid styles for body here */
    


    Header
    
        Box 1
        Box 2
        Box 3
    
    Footer

Need a hint?

Use display: grid; on body. Set grid-template-rows to 60px 1fr 40px and height to 100vh.

Use Flexbox inside <main> to arrange boxes horizontally

Add CSS to make main use display: flex;. Set flex-wrap: wrap; so boxes wrap on small screens. Add gap: 1rem; for spacing between boxes. Also give each box a background color and padding.

CSS




    
    
    Grid vs Flexbox Layout
    
        body {
            display: grid;
            grid-template-rows: 60px 1fr 40px;
            height: 100vh;
            margin: 0;
        }
        /* Add Flexbox styles for main and boxes here */
    


    Header
    
        Box 1
        Box 2
        Box 3
    
    Footer

Need a hint?

Use display: flex; and flex-wrap: wrap; on main. Add gap: 1rem; for spacing. Give each box a background color and padding. Use flex: 1 1 150px; so boxes grow and shrink with a base width.

Add responsive design with a media query

Add a CSS media query for screen widths below 500px. Inside it, set main to flex-direction: column; so boxes stack vertically on small screens.

CSS




    
    
    Grid vs Flexbox Layout
    
        body {
            display: grid;
            grid-template-rows: 60px 1fr 40px;
            height: 100vh;
            margin: 0;
        }
        main {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            padding: 1rem;
        }
        .box1 {
            background-color: #f28b82;
            padding: 1rem;
            flex: 1 1 150px;
        }
        .box2 {
            background-color: #fbbc04;
            padding: 1rem;
            flex: 1 1 150px;
        }
        .box3 {
            background-color: #34a853;
            padding: 1rem;
            flex: 1 1 150px;
        }
        /* Add media query below */
    


    Header
    
        Box 1
        Box 2
        Box 3
    
    Footer

Need a hint?

Use a media query with @media (max-width: 500px). Inside it, set main to flex-direction: column; to stack boxes vertically on small screens.