Grid vs flexbox in CSS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to use Grid over Flexbox?

Which scenario best fits using CSS Grid instead of Flexbox?

A Centering a single item inside a container.

B Aligning items in a single row horizontally.

C Distributing items evenly in a single column vertically.

D Creating a two-dimensional layout with rows and columns.

💡 Hint

Think about whether you need control over both rows and columns or just one direction.

CSS Grid is designed for two-dimensional layouts controlling both rows and columns. Flexbox is mainly for one-dimensional layouts, either row or column.

📝 Syntax

intermediate

Identify the correct Flexbox container syntax

Which CSS snippet correctly sets up a flex container that arranges items in a row and centers them horizontally and vertically?

A display: flex; justify-content: center; align-items: center;

B display: grid; justify-content: center; align-items: center;

C display: flex; justify-items: center; align-content: center;

D display: flexbox; justify-content: center; align-items: center;

💡 Hint

Check the display property value and the correct properties for alignment in Flexbox.

Flexbox container uses display: flex;. The properties justify-content and align-items center items horizontally and vertically. justify-items is not valid for flex containers.

❓ layout

advanced

Grid layout with named areas

Given the CSS below, what will be the visual layout of the grid areas?

CSS

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

A Header spans all columns at bottom, sidebar on left top, content in middle top, footer on right top.

B Header on left top, sidebar in middle top, content on right top, footer spans all columns at bottom.

C Header spans all three columns on top, sidebar on left middle, content in middle and right middle, footer spans all columns at bottom.

D Header spans all columns in middle row, sidebar and content below, footer on top.

💡 Hint

Look at how grid-template-areas define the layout row by row.

The grid-template-areas define a 3-row layout. The first row has 'header' spanning all 3 columns. The second row has 'sidebar' in first column and 'content' spanning next two columns. The last row has 'footer' spanning all columns.

❓ selector

advanced

Selecting flex items with CSS selectors

Which CSS selector targets only the second flex item inside a flex container?

A .container :nth-of-type(2)

B .container > :nth-child(2)

C .container > div:nth-child(2)

D .container > .item:nth-child(2)

💡 Hint

Consider direct children and the correct pseudo-class for position.

:nth-child(2) selects the second child element regardless of type. Using the child combinator > ensures only direct children are selected. Option B correctly selects the second direct child of .container.

❓ accessibility

expert

Improving accessibility in grid layouts

Which practice best improves keyboard navigation accessibility in a complex CSS Grid layout?

A Use semantic HTML elements and logical tab order matching visual grid order.

B Add tabindex="-1" to all grid items to prevent tabbing.

C Disable keyboard navigation and rely on mouse only.

D Use only divs with role="grid" and no focus management.

💡 Hint

Think about how users navigate with keyboard and how HTML structure affects it.

Using semantic HTML elements like <section>, <article>, and ensuring the tab order follows the visual layout helps keyboard users navigate intuitively. Avoid disabling keyboard navigation or misusing tabindex.

Practice

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