CSS Grid placement
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which property positions a grid item horizontally between column lines?
2. What character separates the starting line from the ending line in shorthand placement?
3. What line number can you use to target the very last line of an explicit grid layout?
4. Which syntax correctly makes a block stretch across exactly three tracks?
5. In the grid-area shorthand, which value comes first in the sequence?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1.item { grid-column: 1 / 4; } | A.item { grid-column: 1 / -1; } | |
| 2.item { grid-row: 2 / span 2; } | B.item { grid-area: 1 / 2 / 3 / 5; } | |
| 3Stretches a layout block completely from the first column line to the last grid edge. | CTreating the span layout keyword as if it were a function call with parentheses. | |
| 4Consolidates all row and column boundaries cleanly within a single instruction rule. | DPlaces an item spanning from column line 1 up to column line 4. | |
| 5.item { grid-column: 1, 3; } | EStarts an item at row line 2 and stretches it across 2 row tracks. | |
| 6.item { grid-row: span(2); } | FSeparating grid placement boundaries with a comma instead of a forward slash. |
C
Definitions
grid-column
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
.item-a {
___________: 1 / 3;
}
2.
.item-b {
________: 2 / 5;
}
3.
.sidebar {
grid-column: 1 / ____ 2;
}
4.
.header {
_________: 1 / 1 / 2 / 5;
}
5.
.footer {
grid-column: _ / -1;
}
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
.item class {
B
grid-column: 1 / 3;
C
grid-row: 1 / 2;
D
}
Question 2
A
.box: {
B
grid-column: 1 / 3;
C
grid-row: 2 / 4;
D
}
Question 3
A
.panel {
B
grid-column-start-end: 1 / 3;
C
grid-row: 1 / 2;
D
}
Question 4
A
.sidebar {
B
grid-column: 1 to 4;
C
grid-row: 2 / 3;
D
}
Question 5
A
.main {
B
grid-column: 1 / 4;
C
grid-rows: 2 / 3;
D
}
Answer Key
CSS Grid placement
Section A: Quick Questions
Q1
A — grid-column
Q2
A — Forward slash ( / )
Q3
B — -1
Q4
B — span 3
Q5
A — grid-row-start
Section B: Match the Pairs
Q1
.item {
grid-column: 1 / 4;
} → Places an item spanning from column line 1 up to column line 4.
Q2
.item {
grid-row: 2 / span 2;
} → Starts an item at row line 2 and stretches it across 2 row tracks.
Q3
Stretches a layout block completely from the first column line to the last grid edge. → .item {
grid-column: 1 / -1;
}
Q4
Consolidates all row and column boundaries cleanly within a single instruction rule. → .item {
grid-area: 1 / 2 / 3 / 5;
}
Q5
.item {
grid-column: 1, 3;
} → Separating grid placement boundaries with a comma instead of a forward slash.
Q6
.item {
grid-row: span(2);
} → Treating the span layout keyword as if it were a function call with parentheses.
Section C: Definitions
Q1
grid-column — Shorthand property that specifies a grid item's size and location within the grid columns by defining its start and end lines.Section D: Fill in the Blanks
Q1
.item-a {
grid-column: 1 / 3;
}Q2
.item-b {
grid-row: 2 / 5;
}Q3
.sidebar {
grid-column: 1 / span 2;
}Q4
.header {
grid-area: 1 / 1 / 2 / 5;
}Q5
.footer {
grid-column: 1 / -1;
}Section E: Spot the Error
Q1
A — Line 0 has invalid selector syntax. Remove the extra 'class' keyword.
Q2
A — Line 0 is incorrect because a colon cannot be placed between the class selector and the opening brace.
Q3
B — Line 1 is incorrect. There is no grid-column-start-end property; use the grid-column shorthand instead.
Q4
B — Line 1 is incorrect. The 'to' keyword is invalid; use a forward slash (/) to separate start and end lines.
Q5
C — Line 2 is incorrect. The property name is singular: grid-row, not grid-rows.