Grid rows and columns in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a grid container with 3 columns.

CSS

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

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

Arepeat(3, 1fr)

Bflex

Cblock

Dinline-grid

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid for display.

Not specifying the number of columns correctly.

The grid-template-columns property defines the number of columns in a grid. Using repeat(3, 1fr) creates 3 equal columns.

2fill in blank

medium

Complete the code to create 4 rows each 100 pixels tall.

CSS

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

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

A1fr 1fr 1fr 1fr

Bauto auto auto auto

Crepeat(2, 100px)

D100px 100px 100px 100px

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat(2, 100px) which creates only 2 rows.

Using auto which sizes rows automatically.

The grid-template-rows property sets the height of each row. Writing 100px 100px 100px 100px creates 4 rows each 100 pixels tall.

3fill in blank

hard

Fix the error in the code to properly define 2 columns and 3 rows.

CSS

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

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

Aauto auto auto

Brepeat(3, 1fr)

Crepeat(2, 1fr)

D50px 50px

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat(3, 1fr) which creates 3 columns instead of 2.

Using fixed pixel sizes for columns when flexible sizes are needed.

The code needs 2 columns, so repeat(2, 1fr) correctly creates 2 equal columns.

4fill in blank

hard

Fill both blanks to create a grid with 3 columns and 2 rows, each column 1fr and each row 150px tall.

CSS

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

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

Arepeat(3, 1fr)

Brepeat(2, 150px)

Crepeat(3, 150px)

Drepeat(2, 1fr)

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the number of repeats for columns and rows.

Using pixel units for columns instead of fractions.

repeat(3, 1fr) creates 3 equal columns. repeat(2, 150px) creates 2 rows each 150 pixels tall.

5fill in blank

hard

Fill all three blanks to create a grid with 4 columns of 1fr, 3 rows of 100px, and a gap of 10px between rows and columns.

CSS

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

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

Arepeat(4, 1fr)

Brepeat(3, 100px)

C10px

D5px

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong repeat counts for columns or rows.

Setting gap to too small or wrong units.

repeat(4, 1fr) creates 4 equal columns. repeat(3, 100px) creates 3 rows each 100 pixels tall. gap: 10px adds space between rows and columns.

Practice

1. What does the CSS property grid-template-columns control in a grid layout?

easy

A. The number and width of columns in the grid

B. The number and height of rows in the grid

C. The gap between grid items

D. The background color of the grid container

Solution

1. Step 1: Understand the property name

   The property name grid-template-columns suggests it controls columns.

2. Step 2: Recall grid layout basics

   This property sets how many columns there are and their widths.

3. Final Answer:

   The number and width of columns in the grid -> Option A

4. Quick Check:

   grid-template-columns = columns control [OK]

Hint: Columns = grid-template-columns, rows = grid-template-rows [OK]

Common Mistakes:

• Confusing columns with rows
• Thinking it controls gaps
• Mixing it with background styles

2. Which of the following is the correct syntax to create a grid with 3 columns each 100px wide?

easy

A. grid-template-columns: repeat(3, 100px);

B. grid-template-columns: 3x 100px;

C. grid-template-columns: 100px, 100px, 100px;

D. grid-template-columns: 100px * 3;

Solution

1. Step 1: Identify valid CSS syntax for repeating columns

   The repeat() function is the correct way to repeat values in grid-template-columns.

2. Step 2: Check each option

   grid-template-columns: 100px, 100px, 100px; uses commas (invalid); B: '3x 100px' invalid; C: repeat(3, 100px) correct; D: '* 3' invalid CSS syntax.

3. Final Answer:

   grid-template-columns: repeat(3, 100px); -> Option A

4. Quick Check:

   Use repeat() for repeating columns [OK]

Hint: Use repeat() to simplify repeated column sizes [OK]

Common Mistakes:

• Writing invalid CSS like '3x 100px'
• Using commas between column sizes
• Using multiplication syntax not supported in CSS

3. Given the CSS below, how many rows and columns will the grid have?

display: grid;
grid-template-columns: 150px 1fr 2fr;
grid-template-rows: 100px auto;

medium

A. 2 columns and 2 rows

B. 2 columns and 3 rows

C. 3 columns and 3 rows

D. 3 columns and 2 rows

Solution

1. Step 1: Count columns from grid-template-columns

   There are three values: 150px, 1fr, 2fr, so 3 columns.

2. Step 2: Count rows from grid-template-rows

   There are two values: 100px and auto, so 2 rows.

3. Final Answer:

   3 columns and 2 rows -> Option D

4. Quick Check:

   Count values in columns and rows properties [OK]

Hint: Count values in grid-template-columns and grid-template-rows [OK]

Common Mistakes:

• Mixing up rows and columns count
• Assuming 'auto' adds extra rows
• Ignoring fractional units

4. Identify the error in this CSS grid code:

display: grid;
grid-template-columns: 100px, 200px, 100px;
grid-template-rows: 50px 50px;

medium

A. grid-template-rows must have commas between values

B. Commas should not be used between column sizes

C. display: grid; should be display: grid-container;

D. Column sizes must all be the same unit

Solution

1. Step 1: Check syntax for grid-template-columns

   Values should be space-separated, not comma-separated.

2. Step 2: Verify other options

   grid-template-rows is correct without commas; display: grid is valid; units can differ.

3. Final Answer:

   Commas should not be used between column sizes -> Option B

4. Quick Check:

   Grid values are space-separated, not comma-separated [OK]

Hint: Use spaces, not commas, between grid sizes [OK]

Common Mistakes:

• Using commas between grid sizes
• Changing display property incorrectly
• Thinking units must match

5. You want a grid with 4 equal columns and 3 rows where the first row is 100px tall and the others share remaining space equally. Which CSS is correct?

hard

A. grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 1fr 1fr 1fr;

B. grid-template-columns: 4fr; grid-template-rows: 100px auto auto;

C. grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 1fr 1fr;

D. grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px;

Solution

1. Step 1: Set 4 equal columns

   Using repeat(4, 1fr) creates 4 columns each taking equal space.

2. Step 2: Define 3 rows with first fixed and others flexible

   grid-template-rows: 100px 1fr 1fr; sets first row fixed 100px, next two share remaining space equally.

3. Final Answer:

   grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 1fr 1fr; -> Option C

4. Quick Check:

   repeat() for columns, fixed + fractional rows [OK]

Hint: Use repeat() for equal columns and 1fr for flexible rows [OK]

Common Mistakes:

• Wrong number of columns or rows
• Using auto instead of 1fr for equal space
• Setting all rows fixed height