Skip to content

Commit ec694d7

Browse files
rachelandrewrachelandrew
committed
add grid and flex task
1 parent 7da2e23 commit ec694d7

File tree

7 files changed

+276
-0
lines changed

7 files changed

+276
-0
lines changed

‎learn/tasks/grid/balloons1.jpg‎

20.5 KB
Loading

‎learn/tasks/grid/balloons2.jpg‎

46.7 KB
Loading

‎learn/tasks/grid/balloons3.jpg‎

52.7 KB
Loading

‎learn/tasks/grid/balloons4.jpg‎

19.2 KB
Loading

‎learn/tasks/grid/grid4-download.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Grid and Flex: task 4</title>
9+
10+
<style>
11+
12+
body {
13+
background-color: #fff;
14+
color: #333;
15+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
16+
padding: 1em;
17+
margin: 0;
18+
}
19+
20+
.card {
21+
display: grid;
22+
grid-template-rows: 200px min-content;
23+
}
24+
25+
.card > img {
26+
width: 100%;
27+
height: 100%;
28+
object-fit: cover;
29+
}
30+
31+
.tags {
32+
margin: 0;
33+
padding: 0;
34+
list-style: none;
35+
}
36+
37+
.tags > * {
38+
background-color: #999;
39+
color: #fff;
40+
padding: 0.2em 0.8em;
41+
border-radius: 0.2em;
42+
font-size: 80%;
43+
margin: 5px;
44+
}
45+
</style>
46+
47+
</head>
48+
49+
<body>
50+
51+
<div class="container">
52+
<div class="card">
53+
<img src="balloons1.jpg" alt="a single red balloon">
54+
<ul class="tags">
55+
<li>balloon</li>
56+
<li>red</li>
57+
<li>sky</li>
58+
<li>blue</li>
59+
<li>Hot air balloon</li>
60+
</ul>
61+
</div>
62+
<div class="card">
63+
<img src="balloons2.jpg" alt="balloons over some houses">
64+
<ul class="tags">
65+
<li>balloons</li>
66+
<li>houses</li>
67+
<li>train</li>
68+
<li>harborside</li>
69+
</ul>
70+
</div>
71+
<div class="card">
72+
<img src="balloons3.jpg" alt="close-up of balloons inflating">
73+
<ul class="tags">
74+
<li>balloons</li>
75+
<li>inflating</li>
76+
<li>green</li>
77+
<li>blue</li>
78+
</ul>
79+
</div>
80+
<div class="card">
81+
<img src="balloons4.jpg" alt="a balloon in the sun">
82+
<ul class="tags">
83+
<li>balloon</li>
84+
<li>sun</li>
85+
<li>sky</li>
86+
<li>summer</li>
87+
<li>bright</li>
88+
</ul>
89+
</div>
90+
</div>
91+
92+
</body>
93+
94+
</html>

‎learn/tasks/grid/grid4.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Grid and Flex: task 4</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
14+
15+
16+
.card {
17+
display: grid;
18+
grid-template-rows: 200px min-content;
19+
}
20+
21+
.card > img {
22+
width: 100%;
23+
height: 100%;
24+
object-fit: cover;
25+
}
26+
27+
.tags {
28+
margin: 0;
29+
padding: 0;
30+
list-style: none;
31+
}
32+
33+
.tags > * {
34+
background-color: #999;
35+
color: #fff;
36+
padding: .2em .8em;
37+
border-radius: .2em;
38+
font-size: 80%;
39+
margin: 5px;
40+
}
41+
</style>
42+
43+
<style class="editable">
44+
.container {
45+
46+
}
47+
48+
.tags {
49+
50+
}
51+
</style>
52+
53+
</head>
54+
55+
<body>
56+
<section class="preview">
57+
<div class="container">
58+
<div class="card">
59+
<img src="balloons1.jpg" alt="a single red balloon">
60+
<ul class="tags">
61+
<li>balloon</li>
62+
<li>red</li>
63+
<li>sky</li>
64+
<li>blue</li>
65+
<li>Hot air balloon</li>
66+
</ul>
67+
</div>
68+
<div class="card">
69+
<img src="balloons2.jpg" alt="balloons over some houses">
70+
<ul class="tags">
71+
<li>balloons</li>
72+
<li>houses</li>
73+
<li>train</li>
74+
<li>harborside</li>
75+
</ul>
76+
</div>
77+
<div class="card">
78+
<img src="balloons3.jpg" alt="close-up of balloons inflating">
79+
<ul class="tags">
80+
<li>balloons</li>
81+
<li>inflating</li>
82+
<li>green</li>
83+
<li>blue</li>
84+
</ul>
85+
</div>
86+
<div class="card">
87+
<img src="balloons4.jpg" alt="a balloon in the sun">
88+
<ul class="tags">
89+
<li>balloon</li>
90+
<li>sun</li>
91+
<li>sky</li>
92+
<li>summer</li>
93+
<li>bright</li>
94+
</ul>
95+
</div>
96+
</div>
97+
</section>
98+
99+
<textarea class="playable playable-css" style="min-height:220px;">
100+
.container {
101+
102+
}
103+
104+
.tags {
105+
106+
}
107+
</textarea>
108+
109+
<textarea class="playable playable-html">
110+
<div class="container">
111+
<div class="card">
112+
<img src="balloons1.jpg" alt="a single red balloon">
113+
<ul class="tags">
114+
<li>balloon</li>
115+
<li>red</li>
116+
<li>sky</li>
117+
<li>blue</li>
118+
<li>Hot air balloon</li>
119+
</ul>
120+
</div>
121+
<div class="card">
122+
<img src="balloons2.jpg" alt="balloons over some houses">
123+
<ul class="tags">
124+
<li>balloons</li>
125+
<li>houses</li>
126+
<li>train</li>
127+
<li>harborside</li>
128+
</ul>
129+
</div>
130+
<div class="card">
131+
<img src="balloons3.jpg" alt="close-up of balloons inflating">
132+
<ul class="tags">
133+
<li>balloons</li>
134+
<li>inflating</li>
135+
<li>green</li>
136+
<li>blue</li>
137+
</ul>
138+
</div>
139+
<div class="card">
140+
<img src="balloons4.jpg" alt="a balloon in the sun">
141+
<ul class="tags">
142+
<li>balloon</li>
143+
<li>sun</li>
144+
<li>sky</li>
145+
<li>summer</li>
146+
<li>bright</li>
147+
</ul>
148+
</div>
149+
</div>
150+
</textarea>
151+
152+
<div class="playable-buttons">
153+
<input id="reset" type="button" value="Reset">
154+
</div>
155+
</body>
156+
<script src="../playable.js"></script>
157+
158+
</html>

‎learn/tasks/grid/marking.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,27 @@ This task requires that the student gives each part of the layout a name using t
6060
grid-area: dd;
6161
}
6262
```
63+
64+
## Grid Layout Four
65+
66+
This task demonstrates the understanding of the student in terms of which components make sense as a grid and which as flex.
67+
68+
The container will need to be a grid layout, as we have alignment in rows and columns - two-dimensional.
69+
70+
The ul for the tags needs to be a flex container as tags are not lined up in columns, only in rows and they are centered in the space with the alignment property `justify-content` set to `center`.
71+
72+
The student may try to use flexbox on the container and restrict the cards with percentage values. They may also try to make the items into a grid layout in which case you should point out that the items are not aligned in two dimensions so grid isn't the best choice.
73+
74+
```
75+
.container {
76+
display: grid;
77+
gap: 10px;
78+
grid-template-columns: 1fr 1fr 1fr;
79+
}
80+
81+
.tags {
82+
display: flex;
83+
flex-wrap: wrap;
84+
justify-content: center;
85+
}
86+
```

0 commit comments

Comments
 (0)