├── .gitignore ├── 2e ├── ch1-auto-fill-flexible.html ├── ch1-auto-fill.html ├── ch1-auto-rows.html ├── ch1-basic.html ├── ch1-fr.html ├── ch1-gaps.html ├── ch1-grid-template-areas.html ├── ch1-line-based-grid-area.html ├── ch1-line-based-named-lines.html ├── ch1-line-based-overlap.html ├── ch1-line-based-shorthand.html ├── ch1-line-based-span.html ├── ch1-line-based.html ├── ch1-minmax.html ├── ch1-repeat.html ├── ch2-boxy-overlay.html ├── ch2-boxy-responsive.html ├── ch2-boxy.html ├── ch2-layout.html ├── ch3-layout.html ├── ch4-flex.html ├── ch4-grid.html ├── ch4-layout-styles.css ├── ch4-layout.html ├── ch5-nosubgrid.html ├── ch5-subgrid.html ├── images │ ├── balloon1.jpg │ ├── balloon2.jpg │ ├── balloon3.jpg │ ├── balloon4.jpg │ ├── balloon5.jpg │ ├── balloon6.jpg │ ├── balloon7.jpg │ ├── balloon8.jpg │ └── postmaster.jpg └── layout-styles.css ├── README.md ├── ch1-grid-template-areas.html ├── ch1-line-based-grid-area.html ├── ch1-line-based-shorthand.html ├── ch1-line-based-span.html ├── ch1-line-based.html ├── ch2-boxy-hover.html ├── ch2-boxy.html ├── ch2-layout.html ├── ch3-boxy.html ├── ch3-layout.html ├── ch4-layout-styles.css ├── ch4-layout.html ├── images ├── balloon1.jpg ├── balloon2.jpg ├── balloon3.jpg ├── balloon4.jpg ├── balloon5.jpg ├── balloon6.jpg ├── balloon7.jpg ├── balloon8.jpg └── postmaster.jpg └── layout-styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /2e/ch1-auto-fill-flexible.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple example: auto-fill flexible tracks 5 | 6 | 30 | 31 | 32 | 33 |
34 |
A
35 |
B
36 |
C
37 |
D
38 |
E
39 |
F
40 |
G
41 |
H
42 |
I
43 |
J
44 |
K
45 |
L
46 |
M
47 |
N
48 |
O
49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /2e/ch1-auto-fill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple example: auto-fill fixed width tracks 5 | 6 | 30 | 31 | 32 | 33 |
34 |
A
35 |
B
36 |
C
37 |
D
38 |
E
39 |
F
40 |
G
41 |
H
42 |
I
43 |
J
44 |
K
45 |
L
46 |
M
47 |
N
48 |
O
49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /2e/ch1-auto-rows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple example: grid-auto-rows 5 | 6 | 29 | 30 | 31 | 32 |
33 |
A
34 |
B
35 |
C
36 |
D
37 |
E
38 |
F
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /2e/ch1-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple example 5 | 6 | 28 | 29 | 30 | 31 |
32 |
A
33 |
B
34 |
C
35 |
D
36 |
E
37 |
F
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /2e/ch1-fr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple example: fr units 5 | 6 | 30 | 31 | 32 | 33 |
34 |
A
35 |
B
36 |
Cumulonimbus
37 |
D
38 |
E
39 |
F
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /2e/ch1-gaps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple example: adding gaps 5 | 6 | 29 | 30 | 31 | 32 |
33 |
A
34 |
B
35 |
C
36 |
D
37 |
E
38 |
F
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /2e/ch1-grid-template-areas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid Template Areas 5 | 6 | 52 | 53 | 54 | 55 |
56 |
Header
57 |
Sidebar
58 |
Content
59 |
Footer
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /2e/ch1-line-based-grid-area.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning with grid-area 5 | 6 | 42 | 43 | 44 | 45 |
46 |
A
47 |
B
48 |
C
49 |
D
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /2e/ch1-line-based-named-lines.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning shorthand 5 | 6 | 46 | 47 | 48 | 49 |
50 |
A
51 |
B
52 |
C
53 |
D
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /2e/ch1-line-based-overlap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning shorthand 5 | 6 | 45 | 46 | 47 | 48 |
49 |
A
50 |
B
51 |
C
52 |
D
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /2e/ch1-line-based-shorthand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning shorthand 5 | 6 | 46 | 47 | 48 | 49 |
50 |
A
51 |
B
52 |
C
53 |
D
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /2e/ch1-line-based-span.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning using span 5 | 6 | 46 | 47 | 48 | 49 |
50 |
A
51 |
B
52 |
C
53 |
D
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /2e/ch1-line-based.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning 5 | 6 | 54 | 55 | 56 | 57 |
58 |
A
59 |
B
60 |
C
61 |
D
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /2e/ch1-minmax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple example: minmax 5 | 6 | 29 | 30 | 31 | 32 |
33 |
A
A
A
A
34 |
B
35 |
C
36 |
D
37 |
E
38 |
F
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /2e/ch1-repeat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple example: repeat 5 | 6 | 30 | 31 | 32 | 33 |
34 |
A
35 |
B
36 |
C
37 |
D
38 |
E
39 |
F
40 |
G
41 |
H
42 |
I
43 |
J
44 |
K
45 |
L
46 |
M
47 |
N
48 |
O
49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /2e/ch2-boxy-overlay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Boxy Layout example 5 | 6 | 88 | 89 | 90 | 91 |
92 |
93 |

Little boxes layout

94 |
95 | 96 | Hot air balloons being inflated 97 | Hot air balloons lit up at night 98 | Hot air balloons launching 99 | Mass launch of hot air balloons 100 | A number of hot air balloons in the sky 101 | Inflated hot air balloons in a field 102 | A hot air balloon with a face 103 | Hot air balloons waiting to leave the field 104 |
105 | 106 | 107 | -------------------------------------------------------------------------------- /2e/ch2-boxy-responsive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Boxy Layout example 5 | 6 | 90 | 91 | 92 | 93 |
94 |
95 |

Little boxes layout

96 |
97 | 98 | Hot air balloons being inflated 99 | Hot air balloons lit up at night 100 | Hot air balloons launching 101 | Mass launch of hot air balloons 102 | A number of hot air balloons in the sky 103 | Inflated hot air balloons in a field 104 | A hot air balloon with a face 105 | Hot air balloons waiting to leave the field 106 |
107 | 108 | 109 | -------------------------------------------------------------------------------- /2e/ch2-boxy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Boxy Layout example 5 | 6 | 77 | 78 | 79 | 80 |
81 |
82 |

Little boxes layout

83 |
84 | 85 | Hot air balloons being inflated 86 | Hot air balloons lit up at night 87 | Hot air balloons launching 88 | Mass launch of hot air balloons 89 | A number of hot air balloons in the sky 90 | Inflated hot air balloons in a field 91 | A hot air balloon with a face 92 | Hot air balloons waiting to leave the field 93 |
94 | 95 | 96 | -------------------------------------------------------------------------------- /2e/ch2-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A Layout example 5 | 6 | 7 | 53 | 54 | 55 | 56 |
57 |
58 |

Excerpts from the book The Bristol Royal Mail

59 |
60 | 61 |
62 |

Post letter boxes: position, violation, peculiar uses

63 |
64 |

65 | A remarkable case was that of a servant who was a somnambulist, and 66 | who for some time wrote letters in her sleep, night after night, and 67 | took them to adjacent letter boxes to post. Sometimes she was fully 68 | attired, and at other times only partially so. As a rule, the 69 | letters were properly addressed, but the girl did not always place 70 | postage stamps upon them. 71 |

72 | 73 |

74 | Occasionally the postmen have to encounter the difficulties arising 75 | from a frost-bound letter box. Such a case occurred with a box 76 | situated on the summit of the Mendip Hills. The letter box and the 77 | wall in which the box is built were found by the postman to be 78 | covered with ice, caused by rain and snow having frozen on them. The 79 | door resisted all his efforts to open it, and he had to leave it for 80 | the night. On making another effort when morning came, it taxed his 81 | ingenuity and that of other interested and willing helpers to get 82 | the box open. Hot water was tried, paraffin was poured into the 83 | lock, and it was only after a hammer had been used and a fire in a 84 | movable grate had been applied for a time that the lid could be 85 | opened. 86 |

87 | 88 |

89 | A letter box erected in a brick pillar in a secluded spot on the 90 | East Harptree road, about a mile distant from any habitation, was, 91 | late one night, damaged to the extent of having its iron door 92 | completely smashed off, apparently either by means of a large stone 93 | which lay at its base when the violation was discovered, or by means 94 | of a hammer and jemmy. Although the adjacent ground, ditches, and 95 | hedges were searched, no trace of the iron door could be found. As 96 | three roysterers were known to have passed the box on the night in 97 | question, it was assumed that the damage was done by them out of 98 | pure mischief and not from any desire to rob Her Majesty's mails. 99 | Whether such were the case or not, they had the unpleasant 100 | experience of being locked up over the Sunday on suspicion. 101 |

102 |
103 | 104 | 116 |
117 | 118 | 124 | 125 | 134 |
135 | 136 | 137 | -------------------------------------------------------------------------------- /2e/ch3-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A Responsive Layout example 5 | 6 | 7 | 88 | 89 | 90 | 91 |
92 |
93 |

Excerpts from the book The Bristol Royal Mail

94 |
95 | 96 |
97 |

Post letter boxes: position, violation, peculiar uses

98 |
99 |

100 | A remarkable case was that of a servant who was a somnambulist, and 101 | who for some time wrote letters in her sleep, night after night, and 102 | took them to adjacent letter boxes to post. Sometimes she was fully 103 | attired, and at other times only partially so. As a rule, the 104 | letters were properly addressed, but the girl did not always place 105 | postage stamps upon them. 106 |

107 | 108 |

109 | Occasionally the postmen have to encounter the difficulties arising 110 | from a frost-bound letter box. Such a case occurred with a box 111 | situated on the summit of the Mendip Hills. The letter box and the 112 | wall in which the box is built were found by the postman to be 113 | covered with ice, caused by rain and snow having frozen on them. The 114 | door resisted all his efforts to open it, and he had to leave it for 115 | the night. On making another effort when morning came, it taxed his 116 | ingenuity and that of other interested and willing helpers to get 117 | the box open. Hot water was tried, paraffin was poured into the 118 | lock, and it was only after a hammer had been used and a fire in a 119 | movable grate had been applied for a time that the lid could be 120 | opened. 121 |

122 | 123 |

124 | A letter box erected in a brick pillar in a secluded spot on the 125 | East Harptree road, about a mile distant from any habitation, was, 126 | late one night, damaged to the extent of having its iron door 127 | completely smashed off, apparently either by means of a large stone 128 | which lay at its base when the violation was discovered, or by means 129 | of a hammer and jemmy. Although the adjacent ground, ditches, and 130 | hedges were searched, no trace of the iron door could be found. As 131 | three roysterers were known to have passed the box on the night in 132 | question, it was assumed that the damage was done by them out of 133 | pure mischief and not from any desire to rob Her Majesty's mails. 134 | Whether such were the case or not, they had the unpleasant 135 | experience of being locked up over the Sunday on suspicion. 136 |

137 |
138 | 139 | 151 |
152 | 153 | 159 | 160 | 169 |
170 | 171 | 172 | -------------------------------------------------------------------------------- /2e/ch4-flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Two dimensional 5 | 6 | 30 | 31 | 32 | 33 |
34 |
A
35 |
B
36 |
C
37 |
D
38 |
E
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /2e/ch4-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Two dimensional 5 | 6 | 30 | 31 | 32 | 33 |
34 |
A
35 |
B
36 |
C
37 |
D
38 |
E
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /2e/ch4-layout-styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font: 1.1em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif; 3 | } 4 | 5 | body { 6 | background-color: #fff; 7 | color: #333; 8 | padding: 20px; 9 | } 10 | 11 | img { 12 | max-width: 100%; 13 | } 14 | 15 | ul { 16 | margin: 0; 17 | padding: 0; 18 | list-style: none; 19 | } 20 | 21 | .mainheader li { 22 | border: 1px solid #ccc; 23 | background-color: #f2f2f2; 24 | margin: 0 0 10px 0; 25 | } 26 | 27 | .mainheader li a { 28 | display: block; 29 | text-decoration: none; 30 | color: #000; 31 | padding: 10px 1em 10px 1em; 32 | } 33 | 34 | .box { 35 | background-color: #f2f2f2; 36 | padding: 10px; 37 | border: 1px solid #ccc; 38 | } 39 | 40 | .box h2 { 41 | font-weight: normal; 42 | margin: 0; 43 | padding: 0; 44 | } 45 | 46 | .box a:link, 47 | .box a:visited { 48 | color: rgb(47, 57, 73); 49 | } 50 | 51 | .cta-list a { 52 | text-decoration: none; 53 | } 54 | 55 | @media only screen and (min-width: 460px) { 56 | .mainheader { 57 | grid-area: header; 58 | margin: 0 0 20px 0; 59 | } 60 | .feature-pull { 61 | grid-area: featurepull; 62 | } 63 | .feature { 64 | grid-area: feature; 65 | } 66 | .gallery { 67 | grid-area: secondary; 68 | } 69 | .mainfooter { 70 | grid-area: footer; 71 | } 72 | 73 | .wrapper { 74 | display: grid; 75 | width: 90%; 76 | margin: 0 auto 0 auto; 77 | grid-template-areas: 78 | "header" 79 | "feature" 80 | "featurepull" 81 | "secondary" 82 | "footer"; 83 | } 84 | 85 | .mainheader ul { 86 | display: flex; 87 | } 88 | 89 | .mainheader li { 90 | margin: 0 10px 0 0; 91 | } 92 | 93 | .gallery { 94 | display: flex; 95 | margin: 20px 0 20px 0; 96 | justify-content: space-between; 97 | flex-wrap: wrap; 98 | } 99 | 100 | .gallery li { 101 | width: 45%; 102 | margin: 0 0 20px 0; 103 | } 104 | 105 | .cta-list li { 106 | margin: 0 0 20px 0; 107 | } 108 | } 109 | 110 | @media only screen and (min-width: 760px) { 111 | .wrapper { 112 | grid-template-columns: 1fr 1fr; 113 | column-gap: 5%; 114 | grid-template-areas: 115 | "header header" 116 | "featurepull feature" 117 | "secondary secondary" 118 | "footer footer"; 119 | } 120 | 121 | .gallery li { 122 | width: 21%; 123 | margin: 0; 124 | } 125 | 126 | .cta-list { 127 | display: flex; 128 | justify-content: space-between; 129 | } 130 | 131 | .cta-list li { 132 | width: 42%; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /2e/ch4-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Putting it all together 5 | 6 | 7 | 8 | 9 |
10 |
11 | 18 |
19 | 20 | 23 | 24 |
25 |

Bristol Balloon Fiesta

26 | 27 |

28 | The 2018 Bristol Balloon Fiesta was a great success. Despite the 29 | strong possibility of bad weather launches were held on 2 mornings and 30 | evenings with hundreds of hot air balloons heading off into the West 31 | Country skies. 32 |

33 | 34 | 48 |
49 | 50 | 68 | 69 | 76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /2e/ch5-nosubgrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | With no subgrid 5 | 6 | 55 | 56 | 57 | 58 |
59 |
A
60 |
B
61 | 66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /2e/ch5-subgrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | With subgrid 5 | 6 | 57 | 58 | 59 | 60 |
61 |
A
62 |
B
63 | 68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /2e/images/balloon1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/balloon1.jpg -------------------------------------------------------------------------------- /2e/images/balloon2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/balloon2.jpg -------------------------------------------------------------------------------- /2e/images/balloon3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/balloon3.jpg -------------------------------------------------------------------------------- /2e/images/balloon4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/balloon4.jpg -------------------------------------------------------------------------------- /2e/images/balloon5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/balloon5.jpg -------------------------------------------------------------------------------- /2e/images/balloon6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/balloon6.jpg -------------------------------------------------------------------------------- /2e/images/balloon7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/balloon7.jpg -------------------------------------------------------------------------------- /2e/images/balloon8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/balloon8.jpg -------------------------------------------------------------------------------- /2e/images/postmaster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/2e/images/postmaster.jpg -------------------------------------------------------------------------------- /2e/layout-styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font: 1.1em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif; 3 | } 4 | 5 | body { 6 | background-color: #fff; 7 | color: #333; 8 | padding: 20px; 9 | } 10 | 11 | .mainheader, 12 | .mainfooter { 13 | background-color: #f2f2f2; 14 | padding: 10px; 15 | border: 1px solid #ccc; 16 | } 17 | 18 | .sidebar { 19 | background-color: #ccc; 20 | padding: 10px; 21 | } 22 | 23 | img { 24 | max-width: 100%; 25 | } 26 | 27 | figure { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid Layout 2 | 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: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid Template Areas 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
Header
61 |
Sidebar
62 |
Content
63 |
Footer
64 |
65 | 66 | -------------------------------------------------------------------------------- /ch1-line-based-grid-area.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning Shorthand 5 | 6 | 48 | 49 | 50 | 51 | 52 |
53 |
A
54 |
B
55 |
C
56 |
D
57 |
E
58 |
F
59 |
60 | 61 | -------------------------------------------------------------------------------- /ch1-line-based-shorthand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning Shorthand 5 | 6 | 54 | 55 | 56 | 57 | 58 |
59 |
A
60 |
B
61 |
C
62 |
D
63 |
E
64 |
F
65 |
66 | 67 | -------------------------------------------------------------------------------- /ch1-line-based-span.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning 5 | 6 | 48 | 49 | 50 | 51 | 52 |
53 |
A
54 |
B
55 |
C
56 |
D
57 |
58 | 59 | -------------------------------------------------------------------------------- /ch1-line-based.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line-based Positioning 5 | 6 | 70 | 71 | 72 | 73 | 74 |
75 |
A
76 |
B
77 |
C
78 |
D
79 |
E
80 |
F
81 |
82 | 83 | -------------------------------------------------------------------------------- /ch2-boxy-hover.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Boxy Layout example 5 | 6 | 108 | 109 | 110 | 111 | 112 |
113 |
114 |

Little boxes layout

115 |
116 | 117 | 118 | Bristol Balloon Fiesta 119 | Bristol Balloon Fiesta 120 | Bristol Balloon Fiesta 121 | Bristol Balloon Fiesta 122 | Bristol Balloon Fiesta 123 | Bristol Balloon Fiesta 124 | Bristol Balloon Fiesta 125 | Bristol Balloon Fiesta 126 | 127 | 128 |
129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /ch2-boxy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Boxy Layout example 5 | 6 | 66 | 67 | 68 | 69 | 70 |
71 |
72 |

Little boxes layout

73 |
74 | 75 | 76 | Bristol Balloon Fiesta 77 | Bristol Balloon Fiesta 78 | Bristol Balloon Fiesta 79 | Bristol Balloon Fiesta 80 | Bristol Balloon Fiesta 81 | Bristol Balloon Fiesta 82 | Bristol Balloon Fiesta 83 | Bristol Balloon Fiesta 84 | 85 | 86 |
87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /ch2-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A Layout example 5 | 6 | 7 | 47 | 48 | 49 | 50 |
51 |
52 |

Excerpts from the book The Bristol Royal Mail

53 | 54 |
55 | 56 |
57 |

Post letter boxes: position, violation, peculiar uses

58 |
59 | 60 |

A remarkable case was that of a servant who was a somnambulist, and who for some time wrote letters in her sleep, night after night, and took them to adjacent letter boxes to post. Sometimes she was fully attired, and at other times only partially so. As a rule, the letters were properly addressed, but the girl did not always place postage stamps upon them.

61 | 62 |

Occasionally the postmen have to encounter the difficulties arising from a frost-bound letter box. Such a case occurred with a box situated on the summit of the Mendip Hills. The letter box and the wall in which the box is built were found by the postman to be covered with ice, caused by rain and snow having frozen on them. The door resisted all his efforts to open it, and he had to leave it for the night. On making another effort when morning came, it taxed his ingenuity and that of other interested and willing helpers to get the box open. Hot water was tried, paraffin was poured into the lock, and it was only after a hammer had been used and a fire in a movable grate had been applied for a time that the lid could be opened.

63 | 64 |

A letter box erected in a brick pillar in a secluded spot on the East Harptree road, about a mile distant from any habitation, was, late one night, damaged to the extent of having its iron door completely smashed off, apparently either by means of a large stone which lay at its base when the violation was discovered, or by means of a hammer and jemmy. Although the adjacent ground, ditches, and hedges were searched, no trace of the iron door could be found. As three roysterers were known to have passed the box on the night in question, it was assumed that the damage was done by them out of pure mischief and not from any desire to rob Her Majesty's mails. Whether such were the case or not, they had the unpleasant experience of being locked up over the Sunday on suspicion.

65 |
66 | 67 | 71 | 72 |
73 | 74 | 80 | 81 | 84 |
85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /ch3-boxy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Boxy Layout example 5 | 6 | 113 | 114 | 115 | 116 | 117 |
118 |
119 |

Little boxes layout

120 |
121 | 122 | 123 | Bristol Balloon Fiesta 124 | Bristol Balloon Fiesta 125 | Bristol Balloon Fiesta 126 | Bristol Balloon Fiesta 127 | Bristol Balloon Fiesta 128 | Bristol Balloon Fiesta 129 | Bristol Balloon Fiesta 130 | Bristol Balloon Fiesta 131 | 132 | 133 |
134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /ch3-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A Responsive Layout example 5 | 6 | 7 | 91 | 92 | 93 | 94 |
95 |
96 |

Excerpts from the book The Bristol Royal Mail

97 | 98 |
99 | 100 |
101 |

Post letter boxes: position, violation, peculiar uses

102 |
103 | 104 |

A remarkable case was that of a servant who was a somnambulist, and who for some time wrote letters in her sleep, night after night, and took them to adjacent letter boxes to post. Sometimes she was fully attired, and at other times only partially so. As a rule, the letters were properly addressed, but the girl did not always place postage stamps upon them.

105 | 106 |

Occasionally the postmen have to encounter the difficulties arising from a frost-bound letter box. Such a case occurred with a box situated on the summit of the Mendip Hills. The letter box and the wall in which the box is built were found by the postman to be covered with ice, caused by rain and snow having frozen on them. The door resisted all his efforts to open it, and he had to leave it for the night. On making another effort when morning came, it taxed his ingenuity and that of other interested and willing helpers to get the box open. Hot water was tried, paraffin was poured into the lock, and it was only after a hammer had been used and a fire in a movable grate had been applied for a time that the lid could be opened.

107 | 108 |

A letter box erected in a brick pillar in a secluded spot on the East Harptree road, about a mile distant from any habitation, was, late one night, damaged to the extent of having its iron door completely smashed off, apparently either by means of a large stone which lay at its base when the violation was discovered, or by means of a hammer and jemmy. Although the adjacent ground, ditches, and hedges were searched, no trace of the iron door could be found. As three roysterers were known to have passed the box on the night in question, it was assumed that the damage was done by them out of pure mischief and not from any desire to rob Her Majesty's mails. Whether such were the case or not, they had the unpleasant experience of being locked up over the Sunday on suspicion.

109 |
110 | 111 | 115 | 116 |
117 | 118 | 124 | 125 | 128 |
129 | 130 | 131 | -------------------------------------------------------------------------------- /ch4-layout-styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font: 1.1em/1.3 Gill Sans,Gill Sans MT,Calibri,sans-serif ; 3 | } 4 | 5 | body { 6 | background-color: #fff; 7 | color: #333; 8 | padding: 20px; 9 | } 10 | 11 | img { 12 | max-width: 100%; 13 | } 14 | 15 | ul { 16 | margin: 0; 17 | padding: 0; 18 | list-style: none; 19 | } 20 | 21 | .mainheader li { 22 | border: 1px solid #ccc; 23 | background-color: #f2f2f2; 24 | margin: 0 0 10px 0; 25 | } 26 | 27 | .mainheader li a { 28 | display: block; 29 | text-decoration: none; 30 | color: #000; 31 | padding: 10px 1em 10px 1em; 32 | } 33 | 34 | .box { 35 | background-color: #f2f2f2; 36 | padding: 10px; 37 | border: 1px solid #ccc; 38 | } 39 | 40 | .box h2 { 41 | font-weight: normal; 42 | margin: 0; 43 | padding: 0; 44 | } 45 | 46 | .box a:link, .box a:visited { 47 | color: rgb(47,57,73); 48 | } 49 | 50 | .cta-list a { 51 | text-decoration: none; 52 | } 53 | 54 | 55 | 56 | @media only screen and (min-width: 460px) { 57 | 58 | .mainheader { grid-area: header; margin: 0 0 20px 0;} 59 | .feature-pull { grid-area: featurepull ; } 60 | .feature { grid-area: feature; } 61 | .gallery { grid-area: secondary; } 62 | .mainfooter { grid-area: footer; } 63 | 64 | 65 | .wrapper { 66 | display: grid; 67 | width: 90%; 68 | margin: 0 auto 0 auto; 69 | grid-template-columns: auto; 70 | grid-template-rows: auto ; 71 | grid-template-areas: 72 | "header" 73 | "feature" 74 | "featurepull" 75 | "secondary" 76 | "footer"; 77 | } 78 | 79 | .mainheader ul { 80 | display: flex; 81 | } 82 | 83 | .mainheader li { 84 | margin: 0 10px 0 0; 85 | } 86 | 87 | .gallery { 88 | display: flex; 89 | margin: 20px 0 20px 0; 90 | justify-content: space-between; 91 | flex-wrap: wrap; 92 | } 93 | 94 | .gallery li { 95 | width: 45%; 96 | margin: 0 0 20px 0; 97 | } 98 | 99 | .cta-list li { 100 | margin: 0 0 20px 0; 101 | } 102 | } 103 | 104 | @media only screen and (min-width: 760px) { 105 | .wrapper { 106 | grid-template-columns: 48% 4% 48%; 107 | grid-template-rows: auto ; 108 | grid-template-areas: 109 | "header header header" 110 | "featurepull . feature" 111 | "secondary secondary secondary" 112 | "footer footer footer" 113 | ; 114 | } 115 | 116 | .gallery li { 117 | width: 21%; 118 | margin: 0; 119 | } 120 | 121 | .cta-list { 122 | display: flex; 123 | justify-content: space-between; 124 | } 125 | 126 | .cta-list li { 127 | width: 42%; 128 | } 129 | 130 | } 131 | 132 | -------------------------------------------------------------------------------- /ch4-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Putting it all together 5 | 6 | 7 | 8 | 9 |
10 |
11 | 18 |
19 | 20 | 21 | 22 |
23 |

Bristol Balloon Fiesta

24 | 25 |

The 2014 Bristol Balloon Fiesta was a great success. Despite the strong possibility of bad weather launches were held on 2 mornings and evenings with hundreds of hot air balloons heading off into the West Country skies.

26 | 27 | 35 | 36 |
37 | 38 | 49 | 50 | 53 | 54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /images/balloon1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/balloon1.jpg -------------------------------------------------------------------------------- /images/balloon2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/balloon2.jpg -------------------------------------------------------------------------------- /images/balloon3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/balloon3.jpg -------------------------------------------------------------------------------- /images/balloon4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/balloon4.jpg -------------------------------------------------------------------------------- /images/balloon5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/balloon5.jpg -------------------------------------------------------------------------------- /images/balloon6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/balloon6.jpg -------------------------------------------------------------------------------- /images/balloon7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/balloon7.jpg -------------------------------------------------------------------------------- /images/balloon8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/balloon8.jpg -------------------------------------------------------------------------------- /images/postmaster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abookapart/css-grid-layout-code/790181a15739dae75d1c302b8481dfe9fd24b173/images/postmaster.jpg -------------------------------------------------------------------------------- /layout-styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font: 1.1em/1.3 Gill Sans,Gill Sans MT,Calibri,sans-serif ; 3 | } 4 | 5 | body { 6 | background-color: #fff; 7 | color: #333; 8 | padding: 20px; 9 | } 10 | 11 | .mainheader, .mainfooter { 12 | background-color: #f2f2f2; 13 | padding: 10px; 14 | border: 1px solid #ccc; 15 | } 16 | 17 | .sidebar { 18 | background-color: #ccc; 19 | padding: 10px; 20 | } 21 | 22 | img { 23 | max-width: 100%; 24 | } 25 | 26 | figure { 27 | margin: 0; 28 | padding: 0; 29 | } --------------------------------------------------------------------------------