CSS Grid container
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which declaration initializes a block-level grid container?
2. How should you separate multiple column sizes in grid-template-columns?
3. Which property acts as a modern shorthand to set spacing between both rows and columns?
4. What unit represents an automatic fractional share of available space inside a grid container?
5. Is it valid to mix fixed units like pixels with relative units like fr inside track layouts?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1.container { display: grid; } | ASets a uniform 20-pixel spacing channel between rows and columns. | |
| 2.container { gap: 20px; } | B.container { grid-template-rows: 100px auto; } | |
| 3Creates three parallel vertical columns of equal width distributions. | CUsing box-grid instead of the valid standard grid keyword value. | |
| 4Establishes a horizontal structural framework with two rows. | DUsing commas instead of spaces to separate distinct track sizing elements. | |
| 5.container { grid-template-columns: 1fr, 1fr; } | E.container { grid-template-columns: repeat(3, 1fr); } | |
| 6.container { display: box-grid; } | FTurns an element into a block-level grid container interface. |
C
Definitions
display: grid
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
.wrapper {
_______: grid;
}
2.
.container {
display: grid;
_____________________: 200px 1fr;
}
3.
.board {
display: grid;
__________________: 100px auto;
}
4.
.gallery {
display: grid;
___: 15px;
}
5.
.layout {
display: grid;
grid-template-columns: repeat(3, ___);
}
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
grid-container {
B
display: grid;
C
gap: 10px;
D
}
Question 2
A
.main-grid {
B
display: true-grid;
C
gap: 20px;
D
}
Question 3
A
.container {
B
display: grid;
C
grid-template-columns: 100px, 1fr, 100px;
D
}
Question 4
A
.dashboard {
B
display: grid;
C
grid-template-columns: 1fr 1fr;
D
grid-rows-template: repeat(2, 1fr);
E
}
Question 5
A
.menu {
B
display: grid;
C
grid-template-columns: 200px 1fr;
D
row-space: 15px;
E
}
Answer Key
CSS Grid container
Section A: Quick Questions
Q1
B — display: grid;
Q2
A — With spaces
Q3
B — gap
Q4
A — fr
Q5
A — Yes
Section B: Match the Pairs
Q1
.container {
display: grid;
} → Turns an element into a block-level grid container interface.
Q2
.container {
gap: 20px;
} → Sets a uniform 20-pixel spacing channel between rows and columns.
Q3
Creates three parallel vertical columns of equal width distributions. → .container {
grid-template-columns: repeat(3, 1fr);
}
Q4
Establishes a horizontal structural framework with two rows. → .container {
grid-template-rows: 100px auto;
}
Q5
.container {
grid-template-columns: 1fr, 1fr;
} → Using commas instead of spaces to separate distinct track sizing elements.
Q6
.container {
display: box-grid;
} → Using box-grid instead of the valid standard grid keyword value.
Section C: Definitions
Q1
display: grid — Defines an element as a grid container and establishes a new grid formatting context for its direct children.Section D: Fill in the Blanks
Q1
.wrapper {
display: grid;
}Q2
.container {
display: grid;
grid-template-columns: 200px 1fr;
}Q3
.board {
display: grid;
grid-template-rows: 100px auto;
}Q4
.gallery {
display: grid;
gap: 15px;
}Q5
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
}Section E: Spot the Error
Q1
A — The selector is missing a class dot prefix or tag definition. To target a class named grid-container, use .grid-container.
Q2
B — The value true-grid is invalid. To activate the layout context, use display: grid.
Q3
C — Grid track definitions should be separated by standard spaces, not commas.
Q4
D — The property name is grid-template-rows, not grid-rows-template.
Q5
D — There is no row-space property. Use row-gap or the gap shorthand to separate rows.