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.