Bird
Raised Fist0
CSSmarkup~30 mins

Grid vs flexbox in CSS - Hands-On Comparison

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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
1
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
Hint

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

2
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
Hint

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

3
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
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.

4
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
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.

Practice

(1/5)
1. Which CSS layout method is best for arranging items in both rows and columns simultaneously?
easy
A. Flexbox
B. Grid
C. Float
D. Position absolute

Solution

  1. Step 1: Understand layout capabilities

    Flexbox arranges items in one direction: row or column, but not both at once.

  2. Step 2: Identify the method for two-dimensional layout

    Grid allows arranging items in rows and columns simultaneously, making it suitable for complex layouts.

  3. Final Answer:

    Grid -> Option B

  4. Quick Check:

    Two-dimensional layout = Grid [OK]
Hint: Grid = rows + columns; Flexbox = single row or column [OK]
Common Mistakes:
  • Thinking Flexbox can handle rows and columns at the same time
  • Confusing float with layout methods
  • Assuming position absolute arranges items in grid
2. Which of the following is the correct CSS syntax to create a flex container?
easy
A. display: grid;
B. flex-container: true;
C. flex-direction: grid;
D. display: flex;

Solution

  1. Step 1: Identify the property to create flex container

    The CSS property to create a flex container is display: flex;.

  2. Step 2: Check other options for correctness

    display: grid; creates a grid container, not flex. flex-direction: grid; is invalid. flex-container: true; is not a valid CSS property.

  3. Final Answer:

    display: flex; -> Option D

  4. Quick Check:

    Flex container syntax = display: flex [OK]
Hint: Flex container always uses display: flex [OK]
Common Mistakes:
  • Using display: grid instead of flex
  • Trying to set flex-direction to grid
  • Using non-existent CSS properties
3. Given the CSS below, what will be the layout of the items inside .container? 
.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
}
medium
A. Items arranged horizontally with 1rem gap
B. Items arranged in a grid with 1rem gap
C. Items arranged vertically with 1rem gap
D. Items stacked with no gap

Solution

  1. Step 1: Analyze flex container properties

    The container uses display: flex; and flex-direction: column;, so items stack vertically.

  2. Step 2: Understand gap effect

    The gap: 1rem; adds space between items vertically in column direction.

  3. Final Answer:

    Items arranged vertically with 1rem gap -> Option C

  4. Quick Check:

    flex-direction: column + gap = vertical spacing [OK]
Hint: flex-direction: column stacks items vertically [OK]
Common Mistakes:
  • Assuming flex defaults to row direction
  • Ignoring the gap property
  • Thinking items form a grid with flex
4. Identify the error in this CSS code if the goal is to create a 3-column grid layout: 
.grid-container {
  display: flex;
  grid-template-columns: repeat(3, 1fr);
}
medium
A. Using flex display with grid-template-columns property
B. Missing grid-gap property
C. Incorrect repeat syntax in grid-template-columns
D. Missing width on container

Solution

  1. Step 1: Check display property

    The container uses display: flex;, which does not support grid-template-columns.

  2. Step 2: Understand property compatibility

    grid-template-columns works only with display: grid;. Mixing flex display with grid properties causes no effect or errors.

  3. Final Answer:

    Using flex display with grid-template-columns property -> Option A

  4. Quick Check:

    grid-template-columns requires display: grid [OK]
Hint: Grid properties need display: grid, not flex [OK]
Common Mistakes:
  • Mixing flex display with grid properties
  • Assuming repeat syntax is wrong
  • Forgetting to set display property
5. You want to create a responsive photo gallery with rows and columns that adjust automatically. Which CSS approach is best and why? A developer tries this CSS: 
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.photo {
  flex: 1 1 200px;
  height: 150px;
}
Why might CSS Grid be a better choice here?
hard
A. Grid allows explicit control of rows and columns, making layout predictable and consistent.
B. Flexbox automatically creates rows and columns without extra code.
C. Grid requires less CSS code than flexbox for any layout.
D. Flexbox does not support gaps between items.

Solution

  1. Step 1: Analyze flexbox gallery approach

    Flexbox with wrapping creates rows but columns depend on item size and wrapping, which can be uneven and unpredictable.

  2. Step 2: Compare with grid advantages

    Grid lets you define explicit rows and columns, so the gallery layout is consistent and easier to control across screen sizes.

  3. Final Answer:

    Grid allows explicit control of rows and columns, making layout predictable and consistent. -> Option A

  4. Quick Check:

    Responsive rows + columns = Grid best choice [OK]
Hint: Use Grid for predictable rows and columns in galleries [OK]
Common Mistakes:
  • Assuming flex-wrap creates perfect grid layouts
  • Thinking Grid always uses less CSS
  • Believing flexbox cannot have gaps