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.