Grid system mixin from scratch in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a simple grid container with flex display.

SASS

@mixin grid-container() {
  display: [1];
  flex-wrap: wrap;
}

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

Ablock

Bflex

Cgrid

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' instead of 'flex' will not create a flexible grid.

Using 'inline' will not allow wrapping of grid items.

The grid container uses display: flex; to create a flexible layout that wraps items.

2fill in blank

medium

Complete the mixin to set the width of a grid column based on a fraction of total columns.

SASS

@mixin grid-column($span, $total-columns) {
  width: ([1] / $total-columns) * 100%;
}

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

A$span

B$total-columns

C$span * $total-columns

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using $total-columns in numerator instead of $span.

Multiplying instead of dividing will give incorrect width.

The width is calculated by dividing the number of columns to span by the total columns, then converting to percentage.

3fill in blank

hard

Fix the error in the mixin to add gutter space between grid columns using margin.

SASS

@mixin grid-column($span, $total-columns, $gutter) {
  width: calc( ( $span / $total-columns ) * 100% - [1] );
  margin-right: $gutter;
}

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

Acalc(#{$gutter})

B$gutter * 2

Ccalc($gutter)

D$gutter

Attempts:

3 left

💡 Hint

Common Mistakes

Using $gutter directly inside calc() without interpolation causes errors.

Not using calc() at all will cause invalid CSS.

In Sass, to use a variable inside calc(), you must interpolate it with #{$variable}.

4fill in blank

hard

Fill both blanks to create a responsive grid column that adjusts width on smaller screens.

SASS

@mixin responsive-column($span, $total-columns, $gutter) {
  width: calc( ( $span / $total-columns ) * 100% - [1] );
  margin-right: $gutter;

  @media (max-width: [2]) {
    width: 100%;
    margin-right: 0;
  }
}

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

A#{$gutter}

B10rem

C5rem

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Not interpolating $gutter inside calc() causes invalid CSS.

Using 100% as max-width in media query is invalid.

The gutter variable is interpolated inside calc() for width calculation. The media query uses a max-width of 10rem for responsiveness.

5fill in blank

hard

Fill all three blanks to create a complete grid system mixin with container and column styles.

SASS

@mixin grid-system($total-columns, $gutter) {
  display: [1];
  flex-wrap: wrap;
  margin-left: calc(-1 * [2]);

  > * {
    padding-left: [3];
  }
}

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

Aflex

B$gutter

Ccalc($gutter / 2)

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' instead of 'flex' breaks the flex layout.

Not using half gutter values causes uneven spacing.

The container uses display: flex; and negative left margin equal to half the gutter to offset padding. Each child gets left padding of half the gutter for consistent spacing.