Skip to content

Commit de87ab7

Browse files
author
Rachel
committed
Initial commit of examples
1 parent 9ede37c commit de87ab7

24 files changed

+1130
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
# CSS Grid Layout
22
Code samples from the book
3+
4+
To view these code samples you will need a browser that supports CSS Grid Layout unprefixed. Find out the current state of browser implementation, and how to enable Grid Layout in browsers with support behind a flag at [gridbyexample.com/browsers](http://gridbyexample.com/browsers).

‎ch1-grid-template-areas.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Grid Template Areas</title>
5+
<meta charset="utf-8">
6+
<style>
7+
body {
8+
margin: 40px;
9+
}
10+
11+
.sidebar {
12+
grid-area: sidebar;
13+
}
14+
15+
.content {
16+
grid-area: content;
17+
}
18+
19+
.header {
20+
grid-area: header;
21+
}
22+
23+
.footer {
24+
grid-area: footer;
25+
}
26+
27+
.wrapper {
28+
display: grid;
29+
grid-template-columns: 200px 10px 200px 10px 200px;
30+
grid-template-rows: auto;
31+
grid-template-areas: "header header header header header"
32+
"sidebar . content content content"
33+
"footer footer footer footer footer";
34+
background-color: #fff;
35+
color: #444;
36+
}
37+
38+
.box {
39+
background-color: rgb(120,70,123);
40+
border: 5px solid rgb(88,55,112);
41+
color: #fff;
42+
border-radius: 5px;
43+
padding: 20px;
44+
font: 150%/1.3 Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
45+
46+
}
47+
48+
.header, .footer {
49+
background-color: rgb(23,14,41);
50+
}
51+
52+
53+
54+
</style>
55+
</head>
56+
57+
<body>
58+
59+
<div class="wrapper">
60+
<div class="box header">Header</div>
61+
<div class="box sidebar">Sidebar</div>
62+
<div class="box content">Content</div>
63+
<div class="box footer">Footer</div>
64+
</div>
65+
</body>
66+
</html>

‎ch1-line-based-grid-area.html

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Line-based Positioning Shorthand</title>
5+
<meta charset="utf-8">
6+
<style>
7+
body {
8+
margin: 40px;
9+
}
10+
.wrapper {
11+
display: grid;
12+
grid-template-columns: 100px 10px 100px 10px 100px;
13+
grid-template-rows: auto 10px auto;
14+
background-color: #fff;
15+
color: #444;
16+
}
17+
18+
.box {
19+
background-color: rgb(120,70,123);
20+
border: 5px solid rgb(88,55,112);
21+
color: #fff;
22+
border-radius: 5px;
23+
padding: 20px;
24+
font: 150%/1.3 Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
25+
26+
}
27+
28+
.a {
29+
grid-area: 1 / 1 / 2 / 2;
30+
}
31+
.b {
32+
grid-area: 1 / 3 / 2 / 4;
33+
}
34+
.c {
35+
grid-area: 1 / 5 / 2 / 6;
36+
}
37+
.d {
38+
grid-area: 3 / 1 / 4 / 2;
39+
}
40+
.e {
41+
grid-area: 3 / 3 / 4 / 4;
42+
}
43+
.f {
44+
grid-area: 3 / 5 / 4 / 6;
45+
}
46+
47+
</style>
48+
</head>
49+
50+
<body>
51+
52+
<div class="wrapper">
53+
<div class="box a">A</div>
54+
<div class="box b">B</div>
55+
<div class="box c">C</div>
56+
<div class="box d">D</div>
57+
<div class="box e">E</div>
58+
<div class="box f">F</div>
59+
</div>
60+
</body>
61+
</html>

‎ch1-line-based-shorthand.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Line-based Positioning Shorthand</title>
5+
<meta charset="utf-8">
6+
<style>
7+
body {
8+
margin: 40px;
9+
}
10+
.wrapper {
11+
display: grid;
12+
grid-template-columns: 100px 10px 100px 10px 100px;
13+
grid-template-rows: auto 10px auto;
14+
background-color: #fff;
15+
color: #444;
16+
}
17+
18+
.box {
19+
background-color: rgb(120,70,123);
20+
border: 5px solid rgb(88,55,112);
21+
color: #fff;
22+
border-radius: 5px;
23+
padding: 20px;
24+
font: 150%/1.3 Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
25+
26+
}
27+
28+
.a {
29+
grid-column: 1 / 2;
30+
grid-row: 1 / 2;
31+
}
32+
.b {
33+
grid-column: 3 / 4;
34+
grid-row: 1 / 2;
35+
}
36+
.c {
37+
grid-column: 5 / 6;
38+
grid-row: 1 / 2;
39+
}
40+
.d {
41+
grid-column: 1 / 2;
42+
grid-row: 3 / 4;
43+
}
44+
.e {
45+
grid-column: 3 / 4;
46+
grid-row: 3 / 4;
47+
}
48+
.f {
49+
grid-column: 5 / 6;
50+
grid-row: 3 / 4;
51+
}
52+
53+
</style>
54+
</head>
55+
56+
<body>
57+
58+
<div class="wrapper">
59+
<div class="box a">A</div>
60+
<div class="box b">B</div>
61+
<div class="box c">C</div>
62+
<div class="box d">D</div>
63+
<div class="box e">E</div>
64+
<div class="box f">F</div>
65+
</div>
66+
</body>
67+
</html>

‎ch1-line-based-span.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Line-based Positioning</title>
5+
<meta charset="utf-8">
6+
<style>
7+
body {
8+
margin: 40px;
9+
}
10+
.wrapper {
11+
display: grid;
12+
grid-template-columns: 100px 10px 100px 10px 100px;
13+
grid-template-rows: auto 10px auto;
14+
background-color: #fff;
15+
color: #444;
16+
}
17+
18+
.box {
19+
background-color: rgb(120,70,123);
20+
border: 5px solid rgb(88,55,112);
21+
color: #fff;
22+
border-radius: 5px;
23+
padding: 20px;
24+
font: 150%/1.3 Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
25+
26+
}
27+
28+
.a {
29+
grid-column: 1 / 4;
30+
grid-row: 1 / 2;
31+
}
32+
.b {
33+
grid-column: 5 / 6;
34+
grid-row: 1 / 4;
35+
}
36+
.c {
37+
grid-column: 1 / 2;
38+
grid-row: 3 / 4;
39+
}
40+
.d {
41+
grid-column: 3 / 4;
42+
grid-row: 3 / 4;
43+
}
44+
45+
46+
47+
</style>
48+
</head>
49+
50+
<body>
51+
52+
<div class="wrapper">
53+
<div class="box a">A</div>
54+
<div class="box b">B</div>
55+
<div class="box c">C</div>
56+
<div class="box d">D</div>
57+
</div>
58+
</body>
59+
</html>

‎ch1-line-based.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Line-based Positioning</title>
5+
<meta charset="utf-8">
6+
<style>
7+
body {
8+
margin: 40px;
9+
}
10+
.wrapper {
11+
display: grid;
12+
grid-template-columns: 100px 10px 100px 10px 100px;
13+
grid-template-rows: auto 10px auto;
14+
background-color: #fff;
15+
color: #444;
16+
}
17+
18+
.box {
19+
background-color: rgb(120,70,123);
20+
border: 5px solid rgb(88,55,112);
21+
color: #fff;
22+
border-radius: 5px;
23+
padding: 20px;
24+
font: 150%/1.3 Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
25+
26+
}
27+
28+
.a {
29+
grid-column-start: 1;
30+
grid-column-end: 2;
31+
grid-row-start: 1;
32+
grid-row-end: 2;
33+
}
34+
.b {
35+
grid-column-start: 3;
36+
grid-column-end: 4;
37+
grid-row-start: 1;
38+
grid-row-end: 2;
39+
}
40+
.c {
41+
grid-column-start: 5;
42+
grid-column-end: 6;
43+
grid-row-start: 1;
44+
grid-row-end: 2;
45+
}
46+
.d {
47+
grid-column-start: 1;
48+
grid-column-end: 2;
49+
grid-row-start: 3;
50+
grid-row-end: 4;
51+
}
52+
.e {
53+
grid-column-start: 3;
54+
grid-column-end: 4;
55+
grid-row-start: 3;
56+
grid-row-end: 4;
57+
}
58+
.f {
59+
grid-column-start: 5;
60+
grid-column-end: 6;
61+
grid-row-start: 3;
62+
grid-row-end: 4;
63+
}
64+
65+
66+
67+
68+
69+
</style>
70+
</head>
71+
72+
<body>
73+
74+
<div class="wrapper">
75+
<div class="box a">A</div>
76+
<div class="box b">B</div>
77+
<div class="box c">C</div>
78+
<div class="box d">D</div>
79+
<div class="box e">E</div>
80+
<div class="box f">F</div>
81+
</div>
82+
</body>
83+
</html>

0 commit comments

Comments
 (0)