Skip to content

Commit ec9eea9

Browse files
committed
marking guide
1 parent 3ae694f commit ec9eea9

File tree

1 file changed

+62
-0
lines changed

1 file changed

+62
-0
lines changed

learn/tasks/grid/marking.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Grid Tasks Marking Guide
2+
3+
## Grid Layout One
4+
5+
The aim of this task is to show understanding of the basics of creating a grid with a gap between the items.
6+
7+
```
8+
.grid {
9+
display: grid;
10+
grid-template-columns: 1fr 1fr 1fr;
11+
gap: 20px;
12+
}
13+
```
14+
15+
## Grid Layout Two
16+
17+
The aim of this task is to demonstrate an understanding of placing an item between grid lines, and that it is possible to layer items by way of them occupying the same grid cells.
18+
19+
I have used the shorthands below, however it would be correct for the student to use the longhand `grid-row-start` for example.
20+
21+
```
22+
.item1 {
23+
grid-column: 1 / 4;
24+
grid-row: 1 / 3;
25+
}
26+
27+
.item2 {
28+
grid-column: 2 / 5;
29+
grid-row: 2 / 4;
30+
}
31+
```
32+
33+
## Grid Layout Three
34+
35+
This task requires that the student gives each part of the layout a name using the `grid-area` property, then uses `grid-template-areas` to lay them out. Possible areas of confusion would be not realising they should place a `.` to leave a cell empty, or that they should repeat the name to cause an element to span more than one track.
36+
37+
```
38+
.grid {
39+
display: grid;
40+
gap: 20px;
41+
grid-template-columns: 1fr 2fr;
42+
grid-template-areas: "aa aa"
43+
"bb cc"
44+
". dd";
45+
}
46+
47+
.one {
48+
grid-area: aa;
49+
}
50+
51+
.two {
52+
grid-area: bb;
53+
}
54+
55+
.three {
56+
grid-area: cc;
57+
}
58+
59+
.four {
60+
grid-area: dd;
61+
}
62+
```

0 commit comments

Comments
 (0)