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.

Practice

1. What is the main purpose of using breakpoints in a responsive grid with Sass?

easy

A. To add colors to the grid items

B. To disable the grid on small screens

C. To increase font size only

D. To change the number of columns based on screen size

Solution

1. Step 1: Understand breakpoints in responsive design

   Breakpoints are screen widths where layout changes to fit device size better.

2. Step 2: Role of breakpoints in grids

   They adjust the number of columns so content fits nicely on different screens.

3. Final Answer:

   To change the number of columns based on screen size -> Option D

4. Quick Check:

   Breakpoints adjust layout = B [OK]

Hint: Breakpoints change layout, not just colors or fonts [OK]

Common Mistakes:

• Thinking breakpoints only change colors
• Believing breakpoints disable grids
• Assuming breakpoints only affect fonts

2. Which Sass syntax correctly defines a media query mixin for a breakpoint at 768px?

easy

A. @mixin breakpoint($size) { @media (min-width: $size) { @content; } }

B. @mixin breakpoint($size) { @media (max-width: $size) { @content; } }

C. @mixin breakpoint { @media (min-width: 768px) { @content; } }

D. @mixin breakpoint { @media (max-width: 768px) { @content; } }

Solution

1. Step 1: Understand mixin with parameter

   Mixin should accept a size parameter to be reusable for any breakpoint.

2. Step 2: Correct media query syntax

   Use min-width for breakpoints that apply styles at or above the size.

3. Final Answer:

   @mixin breakpoint($size) { @media (min-width: $size) { @content; } } -> Option A

4. Quick Check:

   Mixin with parameter and min-width = A [OK]

Hint: Use parameters for flexible breakpoints in mixins [OK]

Common Mistakes:

• Forgetting to add parameter for size
• Using max-width instead of min-width incorrectly
• Not including @content inside media query

3. Given the Sass code below, what will be the number of columns on a screen 800px wide?

@mixin breakpoint($size) {
  @media (min-width: $size) {
    @content;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  @include breakpoint(600px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @include breakpoint(900px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

medium

A. 2 columns

B. No columns, grid disabled

C. 3 columns

D. 1 column

Solution

1. Step 1: Check screen width against breakpoints

   Screen is 800px wide, which is >= 600px but < 900px.

2. Step 2: Determine applied grid-template-columns

   At 600px breakpoint, columns become 2; 900px breakpoint not reached yet.

3. Final Answer:

   2 columns -> Option A

4. Quick Check:

   800px between 600 and 900 = 2 columns [OK]

Hint: Compare screen width to breakpoints in order [OK]

Common Mistakes:

• Choosing 3 columns thinking 800px is above 900px
• Choosing 1 column ignoring breakpoint overrides
• Assuming grid disables at certain widths

4. Identify the error in this Sass code for a responsive grid:

@mixin breakpoint($size) {
  @media min-width: $size {
    @content;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  @include breakpoint(768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

medium

A. grid-template-columns syntax is invalid

B. Missing parentheses around media query condition

C. Wrong mixin name

D. No error, code is correct

Solution

1. Step 1: Check media query syntax in mixin

   Media queries require parentheses around conditions, e.g., (min-width: 768px).

2. Step 2: Identify missing parentheses

   Code has @media min-width: $size without parentheses, causing syntax error.

3. Final Answer:

   Missing parentheses around media query condition -> Option B

4. Quick Check:

   Media query needs parentheses = C [OK]

Hint: Always wrap media query conditions in parentheses [OK]

Common Mistakes:

• Omitting parentheses in @media
• Confusing mixin name with media query
• Thinking grid-template-columns syntax is wrong

5. You want a grid that shows 1 column on small screens, 2 columns on medium (≥600px), and 4 columns on large (≥1200px). Which Sass code correctly implements this using a breakpoint mixin?

hard

A. @mixin breakpoint($size) { @media (min-width: $size) { @content; } }
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
@include breakpoint(600px) {
grid-template-columns: repeat(2, 1fr);
}
@include breakpoint(1200px) {
grid-template-columns: repeat(1, 1fr);
}
}

B. @mixin breakpoint($size) { @media (max-width: $size) { @content; } }
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
@include breakpoint(600px) {
grid-template-columns: repeat(2, 1fr);
}
@include breakpoint(1200px) {
grid-template-columns: repeat(1, 1fr);
}
}

C. @mixin breakpoint($size) { @media (min-width: $size) { @content; } }
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
@include breakpoint(600px) {
grid-template-columns: repeat(2, 1fr);
}
@include breakpoint(1200px) {
grid-template-columns: repeat(4, 1fr);
}
}

D. @mixin breakpoint($size) { @media (max-width: $size) { @content; } }
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
@include breakpoint(600px) {
grid-template-columns: repeat(4, 1fr);
}
@include breakpoint(1200px) {
grid-template-columns: repeat(2, 1fr);
}
}

Solution

1. Step 1: Understand breakpoint directions

   Use min-width to apply styles at or above the breakpoint size.

2. Step 2: Check column counts for each breakpoint

   Default 1 column, 2 columns at ≥600px, 4 columns at ≥1200px matches @mixin breakpoint($size) { @media (min-width: $size) { @content; } } .grid { display: grid; grid-template-columns: repeat(1, 1fr); @include breakpoint(600px) { grid-template-columns: repeat(2, 1fr); } @include breakpoint(1200px) { grid-template-columns: repeat(4, 1fr); } }.

3. Final Answer:

   @mixin breakpoint($size) { @media (min-width: $size) { @content; } } .grid { display: grid; grid-template-columns: repeat(1, 1fr); @include breakpoint(600px) { grid-template-columns: repeat(2, 1fr); } @include breakpoint(1200px) { grid-template-columns: repeat(4, 1fr); } } -> Option C

4. Quick Check:

   min-width with increasing columns = A [OK]

Hint: Use min-width and increase columns with larger breakpoints [OK]

Common Mistakes:

• Using max-width instead of min-width
• Setting default columns incorrectly
• Reversing column counts at breakpoints