Responsive grid with breakpoints in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a grid container with 3 columns.

SASS

.grid-container {
  display: [1];
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Drag options to blanks, or click blank then click option'

Ainline-grid

Bgrid

Cblock

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' instead of 'grid' for grid layout.

Using 'block' which does not create a grid container.

The display: grid; property creates a grid container that allows you to define rows and columns.

2fill in blank

medium

Complete the code to set a breakpoint for screens smaller than 600px.

SASS

@media (max-width: [1]) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

Drag options to blanks, or click blank then click option'

A1024px

B768px

C480px

D600px

Attempts:

3 left

💡 Hint

Common Mistakes

Using a breakpoint larger than 600px which affects bigger screens.

Using a breakpoint too small like 480px which misses some devices.

The breakpoint is set at 600px to apply styles for screens smaller than 600 pixels wide.

3fill in blank

hard

Fix the error in the Sass mixin to apply grid columns at a breakpoint.

SASS

@mixin grid-breakpoint($columns) {
  @media (min-width: [1]) {
    grid-template-columns: repeat($columns, 1fr);
  }
}

Drag options to blanks, or click blank then click option'

A600px

Bmin-width: 768px

C768px

Dmax-width: 600px

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'min-width:' again inside the parentheses causing syntax error.

Using 'max-width' instead of 'min-width' which changes the breakpoint logic.

The media query requires only the value for min-width inside parentheses, so 768px is correct here.

4fill in blank

hard

Fill both blanks to create a responsive grid with 2 columns on small screens and 4 on larger screens.

SASS

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

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

Drag options to blanks, or click blank then click option'

Agrid

Bflex

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' instead of 'grid' for the container display.

Setting the initial columns to 3 instead of 2.

The container must use display: grid; and start with 2 columns on small screens.

5fill in blank

hard

Fill all three blanks to create a Sass map for breakpoints and use it in a mixin.

SASS

$breakpoints: (
  small: [1],
  medium: [2],
  large: [3]
);

@mixin respond-to($size) {
  @media (min-width: map-get($breakpoints, $size)) {
    @content;
  }
}

Drag options to blanks, or click blank then click option'

A480px

B768px

C1024px

D600px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up breakpoint values or using inconsistent sizes.

Using values outside typical device widths.

The map defines breakpoints for small, medium, and large screens using common pixel values.

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