Notes for CSS - Layout - Grid By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 https://www.w3.org/TR/css-grid-1/ ## Slide 4 https://caniuse.com/#feat=css-grid 2018-10-25 ## Slide 5 https://caniuse.com/#feat=css-grid 2020-03-09 ## Slide 8 Diagrams by Scott Granneman & Jans Carton https://www.w3.org/TR/css-grid-1/ ## Slide 13 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 14 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 15 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 16 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 17 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 18 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 19 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 20 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 9 1-cell areas 12 2-cell areas 6 3-cell areas 4 4-cell areas 4 6-cell areas 1 9-cell area 9+12+6+4+4+1=36 ## Slide 21 https://codepen.io/websanity/pen/QJbbQX?editors=1100 ## Slide 22 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 23 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 24 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 25 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 26 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 27 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 28 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 29 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 30 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 36 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 37 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 38 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 39 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 40 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 53 Grid items can only have values, e.g., flow-root (the default), flex, grid, or ruby https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 54 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 55 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 60 More on fr soon! https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns ## Slide 61 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 62 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 64 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows IE: see https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-concepts-tracks ## Slide 67 Combining: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines ## Slide 72 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end ## Slide 73 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column ## Slide 74 1st 2 numbers are coordinates for upper left & 2nd 2 numbers are coordinates for bottom right (for Latin-based languages) https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area ## Slide 75 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column ## Slide 76 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 77 https://codepen.io/websanity/pen/rQpvvW?editors=1100 ## Slide 79 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 81 https://codepen.io/websanity/pen/QzdwRd?editors=1100 ## Slide 82 https://codepen.io/websanity/pen/QzdwRd?editors=1100 ## Slide 83 https://codepen.io/websanity/pen/QzdwRd?editors=1100 ## Slide 85 https://developer.mozilla.org/en-US/docs/Glossary/Grid_lines ## Slide 86 https://developer.mozilla.org/en-US/docs/Glossary/Grid_lines ## Slide 87 https://developer.mozilla.org/en-US/docs/Glossary/Grid_lines ## Slide 88 https://developer.mozilla.org/en-US/docs/Glossary/Grid_lines ## Slide 90 https://codepen.io/websanity/pen/wvMXLQL?editors=1000 ## Slide 91 https://codepen.io/websanity/pen/wvMXLQL?editors=1000 ## Slide 92 https://codepen.io/websanity/pen/wvMXLQL?editors=1000 ## Slide 93 https://codepen.io/websanity/pen/wvMXLQL?editors=1000 ## Slide 94 https://codepen.io/websanity/pen/wvMXLQL?editors=1000 ## Slide 98 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas ## Slide 99 https://codepen.io/websanity/pen/gOPKNeQ?editors=1100 ## Slide 100 https://codepen.io/websanity/pen/gOPKNeQ?editors=1100 ## Slide 101 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area ## Slide 102 https://codepen.io/websanity/pen/mLMaWJ?editors=1100 ## Slide 103 https://codepen.io/websanity/pen/mLMaWJ?editors=1100 ## Slide 104 https://codepen.io/websanity/pen/gOPKNeQ?editors=1100 ## Slide 106 https://codepen.io/websanity/pen/gOPKNeQ?editors=1100 ## Slide 108 https://codepen.io/websanity/pen/RyZqed?editors=1100 ## Slide 109 https://codepen.io/websanity/pen/RyZqed?editors=1100 ## Slide 110 https://codepen.io/websanity/pen/RyZqed?editors=1100 ## Slide 111 https://codepen.io/websanity/pen/XqayQV?editors=1100 ## Slide 112 https://codepen.io/websanity/pen/XqayQV?editors=1100 ## Slide 113 https://codepen.io/websanity/pen/XqayQV?editors=1100 ## Slide 115 https://codepen.io/websanity/pen/gOPKNeQ?editors=1100 ## Slide 116 https://codepen.io/websanity/pen/zjEvwZ?editors=1100 ## Slide 117 https://codepen.io/websanity/pen/zjEvwZ?editors=1100 ## Slide 118 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area ## Slide 120 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start ## Slide 121 https://codepen.io/websanity/pen/mdVjrPg?editors=0100 ## Slide 122 https://codepen.io/websanity/pen/mdVjrPg?editors=0100 ## Slide 124 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 125 https://developer.mozilla.org/en-US/docs/Web/CSS/length ## Slide 126 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 127 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fr ## Slide 128 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 129 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 130 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 131 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 132 https://codepen.io/websanity/pen/oQLoBL ## Slide 133 https://codepen.io/websanity/pen/oQLoBL ## Slide 134 https://codepen.io/websanity/pen/oQLoBL ## Slide 135 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 136 https://codepen.io/websanity/pen/oQLoBL ## Slide 137 https://codepen.io/websanity/pen/oQLoBL ## Slide 138 https://codepen.io/websanity/pen/oQLoBL ## Slide 139 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 140 https://codepen.io/websanity/pen/mdJpXvP?editors=1100 ## Slide 141 https://codepen.io/websanity/pen/mdJpXvP?editors=1100 ## Slide 142 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 143 The middle grid item is 250px, it’s maximum size https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 144 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 145 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 146 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 147 https://developer.mozilla.org/en-US/docs/Web/CSS/percentage ## Slide 148 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 149 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 150 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows https://caniuse.com/#feat=css-grid https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content https://developer.mozilla.org/en-US/docs/Web/CSS/minmax & https://caniuse.com/#feat=mdn-css_properties_grid-template-rows_minmax ## Slide 152 https://developer.mozilla.org/en-US/docs/Web/CSS/repeat ## Slide 153 https://developer.mozilla.org/en-US/docs/Web/CSS/repeat ## Slide 155 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 157 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 159 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 161 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 163 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 164 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 165 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 166 https://developer.mozilla.org/en-US/docs/Web/CSS/repeat ## Slide 167 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 168 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 169 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 170 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 171 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 172 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 173 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 174 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 175 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 176 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 177 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 178 https://codepen.io/websanity/pen/EOQmYX?editors=1100 ## Slide 179 https://caniuse.com/#feat=mdn-css_properties_grid-template-rows_repeat Last checked 2020-07-17 ## Slide 183 https://www.w3.org/TR/css-grid-1/#change-2016-grid-gap CSS Box Alignment: https://www.w3.org/TR/css-align-3/ ## Slide 185 https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap ## Slide 186 https://developer.mozilla.org/en-US/docs/Web/CSS/gap ## Slide 187 https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap ## Slide 188 https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap ## Slide 189 https://codepen.io/websanity/pen/wQrPJE?editors=1100 ## Slide 190 https://codepen.io/websanity/pen/wQrPJE?editors=1100 ## Slide 191 https://codepen.io/websanity/pen/wQrPJE?editors=1100 ## Slide 192 https://codepen.io/websanity/pen/wQrPJE?editors=1100 ## Slide 193 https://codepen.io/websanity/pen/wQrPJE?editors=1100 ## Slide 195 Note that Can I Use is wrong with it comes to Safari & iOS Safari! https://caniuse.com/#feat=mdn-css_properties_row-gap_grid_context https://caniuse.com/#feat=mdn-css_properties_column-gap_grid_context https://caniuse.com/#feat=mdn-css_properties_gap_grid_context ## Slide 201 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 202 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 203 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 204 https://codepen.io/websanity/pen/pogKmKq?editors=1100 ## Slide 205 https://codepen.io/websanity/pen/pogKmKq?editors=1100 ## Slide 206 https://codepen.io/websanity/pen/pogKmKq?editors=1100 ## Slide 207 https://codepen.io/websanity/pen/pogKmKq?editors=1100 ## Slide 208 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 209 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 210 https://codepen.io/websanity/pen/pogKmKq?editors=1100 ## Slide 211 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 212 https://codepen.io/websanity/pen/pogKmKq?editors=1100 ## Slide 213 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 214 https://codepen.io/websanity/pen/pogKmKq?editors=1100 ## Slide 216 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 217 https://codepen.io/websanity/pen/XWXYLKX?editors=1100 ## Slide 218 https://developer.mozilla.org/en-US/docs/Web/CSS/place-content ## Slide 219 https://developer.mozilla.org/en-US/docs/Web/CSS/place-content ## Slide 220 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content https://caniuse.com/#feat=mdn-css_properties_place-content_grid_context ## Slide 225 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items ## Slide 226 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items ## Slide 228 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items ## Slide 229 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items ## Slide 230 https://codepen.io/websanity/pen/MWKXdBx?editors=0100 ## Slide 231 https://codepen.io/websanity/pen/MWKXdBx?editors=0100 ## Slide 232 https://codepen.io/websanity/pen/MWKXdBx?editors=0100 ## Slide 233 https://codepen.io/websanity/pen/MWKXdBx?editors=0100 ## Slide 234 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 235 https://codepen.io/websanity/pen/JjGZQob?editors=1100 ## Slide 237 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self ## Slide 238 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self ## Slide 239 https://codepen.io/websanity/pen/WNrKpMG?editors=1100 ## Slide 240 https://developer.mozilla.org/en-US/docs/Web/CSS/place-self ## Slide 241 https://developer.mozilla.org/en-US/docs/Web/CSS/place-self ## Slide 242 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items https://developer.mozilla.org/en-US/docs/Web/CSS/align-self https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self https://developer.mozilla.org/en-US/docs/Web/CSS/place-self ## Slide 246 https://codepen.io/websanity/pen/gOPKZJM?editors=1100 ## Slide 247 https://codepen.io/websanity/pen/gOPKZJM?editors=1100 ## Slide 248 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow ## Slide 249 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow ## Slide 251 https://codepen.io/websanity/pen/qBbKgwa?editors=1100 ## Slide 252 https://codepen.io/websanity/pen/qBbKgwa?editors=1100 ## Slide 254 https://codepen.io/websanity/pen/dyGKrbW?editors=1100 ## Slide 255 https://codepen.io/websanity/pen/dyGKrbW?editors=1100 ## Slide 256 https://codepen.io/websanity/pen/dyGKrbW?editors=1100 ## Slide 257 https://codepen.io/websanity/pen/dyGKrbW?editors=1100 ## Slide 258 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns ## Slide 259 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows ## Slide 261 https://codepen.io/websanity/pen/VwedgyK?editors=1100 ## Slide 262 https://codepen.io/websanity/pen/VwedgyK?editors=1100 ## Slide 263 https://caniuse.com/#feat=mdn-css_properties_grid-auto-flow https://caniuse.com/#feat=mdn-css_properties_grid-auto-rows https://caniuse.com/#feat=mdn-css_properties_grid-auto-columns ## Slide 264 https://codepen.io/websanity/pen/dyodVVa ## Slide 265 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ## Slide 266 https://codepen.io/websanity/pen/abvEaPx?editors=1100 ## Slide 267 https://codepen.io/websanity/pen/abvEaPx?editors=1100 ## Slide 268 https://codepen.io/websanity/pen/abvEaPx?editors=1100 ## Slide 269 https://caniuse.com/#feat=css-subgrid ## Slide 271 https://codepen.io/websanity/pen/JjGBNGq?editors=1100 ## Slide 272 https://codepen.io/websanity/pen/deRgBm?editors=1100 ## Slide 273 https://codepen.io/websanity/pen/PejxoL?editors=1000 ## Slide 275 https://css-tricks.com/snippets/css/complete-guide-grid/ ## Slide 277 https://github.com/rachelandrew/gridbugs ## Slide 278 https://github.com/rachelandrew/gridbugs