Skip to content

Commit f91f1b5

Browse files
jonathanedempseyjonathanedempsey
committed
14 - Grid Template Areas Start Files
1 parent fe4f7be commit f91f1b5

File tree

4 files changed

+219
-0
lines changed

4 files changed

+219
-0
lines changed

Diff for: ‎14 - Grid Template Areas/area-line-names-FINISHED.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="../assets/style.css">
8+
<title>Grid Template Areas: Line Names from Grid Areas!</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="item item1">1</div>
14+
<div class="item item2">2</div>
15+
<div class="item item3">3</div>
16+
<div class="item item4">4</div>
17+
<div class="item item5">5</div>
18+
<div class="item item6">6</div>
19+
<div class="item item7">7</div>
20+
<div class="item item8">8</div>
21+
<div class="item item9">9</div>
22+
<div class="item item10">10</div>
23+
<div class="item item11">11</div>
24+
<div class="item item12">12</div>
25+
<div class="item item13">13</div>
26+
<div class="item item14">14</div>
27+
<div class="item item15">15</div>
28+
<div class="item item16">16</div>
29+
<div class="item item17">17</div>
30+
<div class="item item18">18</div>
31+
<div class="item item19">19</div>
32+
<div class="item item20">20</div>
33+
<div class="item item21">21</div>
34+
<div class="item item22">22</div>
35+
<div class="item item23">23</div>
36+
<div class="item item24">24</div>
37+
<div class="item item25">25</div>
38+
<div class="item item26">26</div>
39+
<div class="item item27">27</div>
40+
<div class="item item28">28</div>
41+
<div class="item item29">29</div>
42+
<div class="item item30">30</div>
43+
</div>
44+
45+
<style>
46+
.container {
47+
display: grid;
48+
grid-gap: 20px;
49+
grid-template-areas:
50+
"💩 💩 💩 💩 🍔 🍔 🍔 🍔"
51+
"💩 💩 💩 💩 🍔 🍔 🍔 🍔"
52+
"💩 💩 💩 💩 🍔 🍔 🍔 🍔"
53+
"💩 💩 💩 💩 🍔 🍔 🍔 🍔";
54+
}
55+
56+
.item3 {
57+
grid-column: 💩-start / 🍔-end;
58+
grid-row-end: 💩-end;
59+
}
60+
</style>
61+
</body>
62+
63+
</html>

Diff for: ‎14 - Grid Template Areas/area-line-names-START.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="../assets/style.css">
8+
<title>Grid Template Areas: Line Names from Grid Areas!</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="item item1">1</div>
14+
<div class="item item2">2</div>
15+
<div class="item item3">3</div>
16+
<div class="item item4">4</div>
17+
<div class="item item5">5</div>
18+
<div class="item item6">6</div>
19+
<div class="item item7">7</div>
20+
<div class="item item8">8</div>
21+
<div class="item item9">9</div>
22+
<div class="item item10">10</div>
23+
<div class="item item11">11</div>
24+
<div class="item item12">12</div>
25+
<div class="item item13">13</div>
26+
<div class="item item14">14</div>
27+
<div class="item item15">15</div>
28+
<div class="item item16">16</div>
29+
<div class="item item17">17</div>
30+
<div class="item item18">18</div>
31+
<div class="item item19">19</div>
32+
<div class="item item20">20</div>
33+
<div class="item item21">21</div>
34+
<div class="item item22">22</div>
35+
<div class="item item23">23</div>
36+
<div class="item item24">24</div>
37+
<div class="item item25">25</div>
38+
<div class="item item26">26</div>
39+
<div class="item item27">27</div>
40+
<div class="item item28">28</div>
41+
<div class="item item29">29</div>
42+
<div class="item item30">30</div>
43+
</div>
44+
45+
<style>
46+
.container {
47+
display: grid;
48+
grid-gap: 20px;
49+
}
50+
</style>
51+
</body>
52+
53+
</html>

Diff for: ‎14 - Grid Template Areas/areas-FINISHED.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="../assets/style.css">
8+
<title>Grid Template Areas</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="item item1">
14+
<p>I'm Sidebar #1</p>
15+
</div>
16+
<div class="item item2">
17+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
18+
<p>Lorem ipsum d</p>
19+
</div>
20+
<div class="item item3">
21+
<p>I'm Sidebar #2</p>
22+
</div>
23+
<div class="item footer">
24+
<p>I'm the footer</p>
25+
</div>
26+
</div>
27+
28+
<style>
29+
.container {
30+
display: grid;
31+
grid-gap: 20px;
32+
grid-template-columns: 1fr 10fr 1fr;
33+
grid-template-rows: 150px 150px 100px;
34+
grid-template-areas:
35+
"sidebar-1 content sidebar-2"
36+
"sidebar-1 content sidebar-2"
37+
"footer footer footer"
38+
}
39+
40+
.footer {
41+
grid-area: footer;
42+
}
43+
44+
.item1 {
45+
grid-area: sidebar-1;
46+
}
47+
48+
.item2 {
49+
grid-area: content;
50+
}
51+
52+
.item3 {
53+
grid-area: sidebar-2;
54+
}
55+
56+
@media (max-width: 700px) {
57+
.container {
58+
grid-template-areas:
59+
"content content content"
60+
"sidebar-1 sidebar-1 sidebar-2"
61+
"footer footer footer"
62+
}
63+
}
64+
</style>
65+
</body>
66+
67+
</html>

Diff for: ‎14 - Grid Template Areas/areas-START.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="../assets/style.css">
8+
<title>Grid Template Areas</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="item item1">
14+
<p>I'm Sidebar #1</p>
15+
</div>
16+
<div class="item item2">
17+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
18+
<p>Lorem ipsum d</p>
19+
</div>
20+
<div class="item item3">
21+
<p>I'm Sidebar #2</p>
22+
</div>
23+
<div class="item footer">
24+
<p>I'm the footer</p>
25+
</div>
26+
</div>
27+
28+
<style>
29+
.container {
30+
display: grid;
31+
grid-gap: 20px;
32+
}
33+
</style>
34+
</body>
35+
36+
</html>

0 commit comments

Comments
 (0)