Container and wrapper patterns in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a container with a max width and center it horizontally.

SASS

.container {
  max-width: [1];
  margin-left: auto;
  margin-right: auto;
}

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

A100%

B1200px

C50vw

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 100% for max-width makes the container full width, not limited.

Using 'auto' as max-width is invalid.

The max-width property limits the container's width to 1200px, and margin-left: auto and margin-right: auto center it horizontally.

2fill in blank

medium

Complete the code to add horizontal padding inside the container for spacing.

SASS

.container {
  padding-left: [1];
  padding-right: [1];
}

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

A1rem

B0

C10px

D5%

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 removes padding and makes content touch edges.

Using percentages can cause inconsistent spacing.

Using 1rem for padding adds consistent horizontal space inside the container, improving readability.

3fill in blank

hard

Fix the error in the wrapper class to make it a flex container that centers content vertically and horizontally.

SASS

.wrapper {
  display: [1];
  justify-content: center;
  align-items: center;
}

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

Ablock

Bgrid

Cflex

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' or 'inline' does not enable flexbox centering.

Using 'grid' requires different properties for centering.

Setting display: flex makes the wrapper a flex container, enabling justify-content and align-items to center content both horizontally and vertically.

4fill in blank

hard

Fill both blanks to create a responsive wrapper that uses flexbox and wraps items to the next line if needed.

SASS

.wrapper {
  display: [1];
  flex-wrap: [2];
}

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

Aflex

Bwrap

Cnowrap

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nowrap' prevents items from wrapping.

Using 'block' for display disables flexbox.

Using display: flex enables flexbox layout, and flex-wrap: wrap allows items to move to the next line when they don't fit in one row.

5fill in blank

hard

Fill all three blanks to create a container with a max width, horizontal padding, and centered margin.

SASS

.container {
  max-width: [1];
  padding-left: [2];
  margin: 0 [3];
}

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

A1200px

B1rem

Cauto

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using 100% for max-width removes the limit.

Using 0 for padding removes spacing.

Using 0 or fixed values for margin prevents centering.

The container has a max width of 1200px, horizontal padding of 1rem for spacing inside, and horizontal margins set to auto to center it on the page.