Responsive grid with breakpoints in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS grid code?

Given this SASS code, what CSS will it generate for the grid container?

SASS

$breakpoints: (small: 480px, medium: 768px);
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  @media (min-width: map-get($breakpoints, medium)) {
    grid-template-columns: repeat(4, 1fr);
  }
}

A

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

B

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
}

C

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

D

.container {
  display: flex;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

💡 Hint

Look at how media queries are nested inside the SASS block and how map-get extracts breakpoint values.

The SASS code compiles to CSS where the base grid has 2 columns. At the medium breakpoint (768px), it changes to 4 columns inside a media query. Option A matches this output exactly.

🧠 Conceptual

intermediate

How does the SASS map-get function help with responsive breakpoints?

Why is using map-get($breakpoints, medium) better than hardcoding pixel values in media queries?

A It disables grid layouts on smaller screens.

B It automatically converts pixel values to em units for better accessibility.

C It prevents media queries from being applied on mobile devices.

D It allows central management of breakpoint values, making updates easier and consistent across styles.

💡 Hint

Think about how changing one value in a map affects all related styles.

Using map-get with a breakpoint map means you only change the pixel value once in the map. This keeps your code DRY (Don't Repeat Yourself) and consistent.

❓ selector

advanced

Which SASS selector targets grid items only on medium screens?

Given a grid container with items, which SASS snippet applies styles only to .item elements when the screen is at least 768px wide?

SASS

$breakpoints: (medium: 768px);
.container {
  display: grid;
  .item {
    color: black;
    // Which option applies red color only on medium screens?
  }
}

A @media (min-width: 768px) { color: red; }

B @media (min-width: map-get($breakpoints, medium)) { .item { color: red; } }

C @media (min-width: map-get($breakpoints, medium)) { color: red; }

D &:media(min-width: map-get($breakpoints, medium)) { color: red; }

💡 Hint

Remember how media queries are nested inside selectors in SASS.

Option C correctly nests the media query inside the .item selector block using map-get, applying color red only at the medium breakpoint. Option C hardcodes the value instead of using the breakpoint map. Option C nests .item inside the media query, incorrectly targeting descendant .item elements. Option C uses wrong syntax.

❓ layout

advanced

What visual layout will this SASS grid produce on a 500px wide screen?

Consider this SASS code for a grid container: $breakpoints: (small: 480px, medium: 768px); .container { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; @media (min-width: map-get($breakpoints, small)) { grid-template-columns: repeat(2, 1fr); } @media (min-width: map-get($breakpoints, medium)) { grid-template-columns: repeat(4, 1fr); } } What will the grid look like on a 500px wide screen?

A One column with items stacked vertically.

B Two columns with equal width and 1rem gap between items.

C Four columns with equal width and 1rem gap.

D Grid items will overlap because no columns are defined.

💡 Hint

Check which media queries apply at 500px width.

At 500px, the screen is wider than the small breakpoint (480px) but less than medium (768px). So the grid uses 2 columns with 1rem gap.

❓ accessibility

expert

How to ensure accessible keyboard navigation in a responsive grid?

You have a responsive grid of interactive cards. Which practice improves keyboard accessibility across all screen sizes?

A Use semantic HTML elements like <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> for cards and ensure focus styles are visible.

B Disable tab navigation on smaller screens to avoid clutter.

C Hide focus outlines with CSS to keep the design clean.

D Use only <code>&lt;div&gt;</code> elements with click handlers and no focus styles.

💡 Hint

Think about how keyboard users interact with page elements.

Using semantic interactive elements ensures keyboard users can tab through cards naturally. Visible focus styles help users know which card is active. Disabling tab or hiding outlines harms accessibility.