Why custom grids offer control in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a grid container with 3 equal columns.

SASS

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

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

Agrid

Bflex

Cblock

Dinline-grid

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'block' which does not create a grid.

The display: grid; property creates a grid container, enabling grid layout.

2fill in blank

medium

Complete the code to set the gap between grid rows and columns to 1rem.

SASS

.grid-container {
  display: grid;
  grid-gap: [1];
}

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

A5em

B1rem

C10px

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using '0' which removes gaps.

Using '10px' which is fixed and less flexible.

The grid-gap property sets the space between rows and columns. Using 1rem sets a consistent gap relative to the root font size.

3fill in blank

hard

Fix the error in the code to create a grid with 4 columns each 100px wide.

SASS

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

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

A4

B3

Cauto

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using '3' which creates fewer columns than needed.

Using 'auto' which is invalid as a count.

The repeat(4, 100px) function creates 4 columns each 100 pixels wide.

4fill in blank

hard

Fill both blanks to create a grid with 2 columns: first 150px wide, second fills remaining space.

SASS

.grid-container {
  display: grid;
  grid-template-columns: [1] [2];
}

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

A150px

B1fr

Cauto

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which may not fill remaining space as expected.

Using '100%' which does not fill the remaining space as expected.

The first column is fixed at 150px. The second column uses 1fr to fill the remaining space.

5fill in blank

hard

Fill all three blanks to create a grid with 3 rows: 100px, flexible, and 2 times flexible.

SASS

.grid-container {
  display: grid;
  grid-template-rows: [1] [2] [3];
}

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

A100px

B1fr

C2fr

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which sizes based on content, not fractions.

Using only fixed sizes which lose flexibility.

The first row is fixed at 100px. The second row takes one fraction of remaining space, and the third row takes two fractions, making it twice as tall as the second.