Bird
Raised Fist0
SASSmarkup~30 mins

Responsive grid with breakpoints in SASS - Mini Project: Build & Apply

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
Responsive Grid with Breakpoints using Sass
📖 Scenario: You are building a simple responsive grid layout for a website. The grid should show items in one column on small screens, two columns on medium screens, and four columns on large screens.
🎯 Goal: Create a responsive grid using Sass variables and media queries. The grid items should adjust their width based on screen size breakpoints.
📋 What You'll Learn
Use Sass variables for breakpoints
Create a grid container with flexbox
Define grid item widths for small, medium, and large screens
Use media queries with the Sass variables
Ensure the grid is responsive and accessible
💡 Why This Matters
🌍 Real World
Responsive grids are used on almost every modern website to display content neatly on all devices, from phones to desktops.
💼 Career
Knowing how to create responsive layouts with Sass and media queries is a key skill for front-end developers and web designers.
Progress0 / 4 steps
1
Set up the HTML structure
Create a div with class grid containing exactly four child div elements with class grid-item. Each grid-item should have text content: Item 1, Item 2, Item 3, and Item 4 respectively.
SASS
Hint

Use a div with class grid as the container. Inside it, add four div elements with class grid-item and the exact text content.

2
Define Sass variables for breakpoints
In your Sass file, create three variables: $small-screen set to 480px, $medium-screen set to 768px, and $large-screen set to 1024px.
SASS
Hint

Use the Sass variable syntax: $variable-name: value; for each breakpoint.

3
Create the responsive grid styles
Write Sass code to style the .grid container with display: flex and flex-wrap: wrap. Then style .grid-item to have width: 100% by default. Add media queries using $medium-screen and $large-screen to set .grid-item width to 50% at medium screens and 25% at large screens.
SASS
Hint

Use flexbox on .grid and set width on .grid-item inside media queries with the breakpoint variables.

4
Add accessibility and responsive meta tag
Add a <meta> tag inside the <head> of your HTML with name="viewport" and content="width=device-width, initial-scale=1.0". Also add aria-label="Responsive grid container" to the div with class grid.
SASS
Hint

The viewport meta tag helps the page scale on different devices. The aria-label improves accessibility by describing the grid container.

Practice

(1/5)
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