Grid container in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container a grid container.

CSS

container {
  display: [1];
}

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

Ablock

Bflex

Cinline

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using display: flex; instead of grid.

Forgetting to set the display property.

The display property set to grid makes the container a grid container.

2fill in blank

medium

Complete the code to create three equal columns in the grid container.

CSS

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

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

A3

B2

C4

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat(2, 1fr) which creates only two columns.

Using auto inside repeat() which is invalid.

The repeat(3, 1fr) creates three equal columns in the grid.

3fill in blank

hard

Fix the error in the code to properly define the grid container with two rows.

CSS

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

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

Arepeat(2, 1fr)

B100px, 200px

Crepeat(2 1fr)

D100px 200px

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the comma inside repeat().

Using commas between sizes without repeat().

The correct syntax for repeating rows is repeat(2, 1fr) with a comma separating the number and size.

4fill in blank

hard

Fill both blanks to create a grid container with 4 columns and 2 rows.

CSS

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

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

Agrid

Bflex

C3

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid for display.

Setting the wrong number of columns.

Setting display: grid; makes the container a grid. Using repeat(4, 1fr) creates 4 equal columns.

5fill in blank

hard

Fill all three blanks to create a grid container with 3 columns, 2 rows, and a 10px gap between grid items.

CSS

container {
  display: [1];
  grid-template-columns: repeat([2], 1fr);
  grid-gap: [3];
  grid-template-rows: repeat(2, 150px);
}

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

Agrid

B3

C10px

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid for display.

Forgetting the comma in repeat().

Using invalid units for gap.

Use display: grid; to create a grid container, repeat(3, 1fr) for three columns, and grid-gap: 10px; to add space between items.

Practice

1. What CSS property do you use to make an element a grid container?

easy

A. grid-template-columns: auto;

B. display: flex;

C. position: grid;

D. display: grid;

Solution

1. Step 1: Understand grid container basics

   To create a grid layout, the container must have display: grid; set.

2. Step 2: Check other options

   display: flex; creates a flexbox, not grid. position: grid; is invalid. grid-template-columns defines columns but does not make container a grid.

3. Final Answer:

   display: grid; -> Option D

4. Quick Check:

   Grid container = display: grid; [OK]

Hint: Grid container always needs display: grid; [OK]

Common Mistakes:

• Using display: flex; instead of grid
• Trying to use position: grid;
• Setting grid-template-columns without display: grid;

2. Which of the following is the correct syntax to create a grid with 3 equal columns?

easy

A. grid-template-columns: 1fr 1fr 1fr;

B. grid-template-columns: 3px;

C. grid-columns: repeat(3, 1fr);

D. grid-template-rows: 1fr 1fr 1fr;

Solution

1. Step 1: Understand grid-template-columns syntax

   The property grid-template-columns defines columns. Using 1fr 1fr 1fr creates 3 equal columns.

2. Step 2: Check other options

   3px is a fixed small width, not equal columns. grid-columns is invalid property. grid-template-rows sets rows, not columns.

3. Final Answer:

   grid-template-columns: 1fr 1fr 1fr; -> Option A

4. Quick Check:

   Equal columns = grid-template-columns: 1fr 1fr 1fr; [OK]

Hint: Use grid-template-columns with 1fr units for equal columns [OK]

Common Mistakes:

• Using grid-columns instead of grid-template-columns
• Confusing rows and columns properties
• Using fixed px values for equal flexible columns

3. Given this CSS:

 .container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 50px;
}

How many grid cells are created inside .container?

medium

A. 4

B. 2

C. 6

D. 8

Solution

1. Step 1: Calculate columns and rows

   There are 2 columns (100px and 200px) and 2 rows (50px and 50px).

2. Step 2: Multiply columns by rows

   Total grid cells = 2 columns x 2 rows = 4 cells.

3. Final Answer:

   4 -> Option A

4. Quick Check:

   2 columns x 2 rows = 4 cells [OK]

Hint: Multiply number of columns by rows for total grid cells [OK]

Common Mistakes:

• Adding columns and rows instead of multiplying
• Counting only columns or only rows
• Confusing grid cells with grid lines

4. What is wrong with this CSS if the goal is to create a grid container with 3 equal columns?

 .grid {
  display: grid;
  grid-template-columns: repeat(3);
}

medium

A. display: grid; is missing

B. Missing unit for repeat count

C. repeat() requires two arguments: count and size

D. grid-template-columns cannot use repeat()

Solution

1. Step 1: Check repeat() syntax

   The repeat() function needs two arguments: number of times and size, e.g. repeat(3, 1fr).

2. Step 2: Identify the error

   Here, only repeat(3) is given, missing the size argument, so it's invalid.

3. Final Answer:

   repeat() requires two arguments: count and size -> Option C

4. Quick Check:

   repeat() needs count and size [OK]

Hint: repeat() always needs count and size, like repeat(3, 1fr) [OK]

Common Mistakes:

• Using repeat() with only one argument
• Forgetting to specify display: grid;
• Thinking repeat() is invalid in grid-template-columns

5. You want a grid container that has 2 columns: the first column is 150px wide, and the second column fills the remaining space. Which CSS is correct?

hard

A. display: grid; grid-template-columns: 150px auto;

B. display: grid; grid-template-columns: 150px 1fr;

C. display: grid; grid-template-columns: auto 150px;

D. display: grid; grid-template-columns: 1fr 150px;

Solution

1. Step 1: Understand fixed and flexible columns

   150px is fixed width. To fill remaining space, use 1fr which means flexible fraction.

2. Step 2: Check options

   display: grid; grid-template-columns: 150px auto; uses auto which sizes based on content, not remaining space. Options B and D put 150px in wrong column order.

3. Final Answer:

   display: grid; grid-template-columns: 150px 1fr; -> Option B

4. Quick Check:

   Fixed + flexible = 150px 1fr [OK]

Hint: Use 1fr for flexible space after fixed width [OK]

Common Mistakes:

• Using auto instead of 1fr for flexible space
• Swapping column order
• Not setting display: grid;