1<!DOCTYPE html> 2<html lang="en-GB"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <title>Get Started with Grid Layout</title> 9 <link rel="canonical" href="http://gridbyexample.com/learn/"> 10 11 <link rel="preconnect" href="fonts.google.com" /> 12 <link rel="preconnect" href="platform.twitter.com" /> 13 <link rel="preconnect" href="track.gaug.es" /> 14 <link rel="preconnect" href="m.servedby-buysellads.com" /> 15 <link rel="preconnect" href="d36ee2fcip1434.cloudfront.net" /> 16 <link rel="dns-prefetch" href="fonts.google.com" /> 17 <link rel="dns-prefetch" href="platform.twitter.com" /> 18 <link rel="dns-prefetch" href="track.gaug.es" /> 19 <link rel="dns-prefetch" href="m.servedby-buysellads.com" /> 20 <link rel="dns-prefetch" href="d36ee2fcip1434.cloudfront.net" /> 21 22
22<script type="text/javascript"> 23 var _gauges = _gauges || []; 24 (function() { 25 var t = document.createElement('script'); 26 t.type = 'text/javascript'; 27 t.async = true; 28 t.id = 'gauges-tracker'; 29 t.setAttribute('data-site-id', '5923de867218b50718020ae0'); 30 t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif'); 31 t.src = 'https://d36ee2fcip1434.cloudfront.net/track.js'; 32 var s = document.getElementsByTagName('script')[0]; 33 s.parentNode.insertBefore(t, s); 34 })(); 35</script>
35 36 37 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic" /> 38 <link rel="stylesheet" href="/css/common.css" /> 39
39<script src="//platform.twitter.com/widgets.js" async defer></script>
39 40 41 </head> 42 43 44 <body> 45 46
46<script src="//m.servedby-buysellads.com/monetization.js"></script>
46 47
47<script> 48 (function(){ 49 if(typeof _bsa !== 'undefined' && _bsa) { 50 _bsa.init('stickybox', 'CKYI4KQJ', 'placement:gridbyexamplecom'); 51 } 52 })(); 53 </script>
53 54<header class="header"> 55 <div class="wrapper"> 56 57 <div class="about"> 58 <div class="follow"><a href="https://twitter.com/rachelandrew" class="twitter-follow-button" data-size="large" data-show-screen-name="true" data-show-count="true">Follow @rachelandrew</a></div> 59 <h1><a href="/">Grid by Example</a></h1> 60 <p>Everything you need to learn CSS Grid Layout</p> 61 62 </div> 63 64 65 66 </div> 67 68 <nav class="main"> 69 <ul class="nav"> 70 <li><a href="/learn">Start Here</a></li> 71 <li><a href="/examples">Examples</a></li> 72 <li><a href="/patterns">Patterns</a></li> 73 <li><a href="/video">Video tutorial</a></li> 74 <li><a href="/resources">Resources</a></li> 75 </ul> 76 </nav> 77</header> 78 79 80 81 <div class="wrapper"> 82 <div class="content"> 83 <h1 id="get-started-with-grid-layout">Get Started with Grid Layout</h1> 84 85<p>There is quite a lot to the CSS Grid Specification, however you donât have to learn the whole thing at once. Iâve gathered some of my resources here as a getting started guide. Start with the first few links, then check out the other sections based on the problems you need to solve.</p> 86 87<p>For more resources from around the web take a look at the <a href="/resources">resources section</a> of this site.</p> 88 89 </div> 90 <section class="learn-section"> 91 <h2>Get Started</h2> 92 <div class="learn-video panel-box"> 93 <h3>Video and Presentations</h3> 94 <ul> 95 <li><a href="https://www.youtube.com/watch?v=f1yM8HYv9lc">Presentation: Graduating to Grid</a> also see the <a href="https://noti.st/rachelandrew/LJXMWL/graduating-to-grid">resources for this talk</a>.</li> 96 <li><a href="/video/series-define-a-grid/">Defining a grid</a></li> 97 <li><a href="/video/series-the-fr-unit/">The fr unit</a></li> 98 <li><a href="/video/series-repeat/">Repeat notation</a></li> 99 <li><a href="/video/series-auto-placement-order/">Auto-placement and order</a></li> 100 101 </ul> 102 </div> 103 104 <div class="learn-article panel-box"> 105 <h3>Articles and blog posts</h3> 106 <ul> 107 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">MDN: Basic Concepts of Grid Layout</a></li> 108 <li><a href="/what">About Grid Layout</a></li> 109 </ul> 110 </div> 111 112 <div class="learn-examples panel-box"> 113 <h3>Example code</h3> 114 <ul> 115 <li><a href="/examples/example1">Defining a grid</a></li> 116 <li><a href="/examples/example10">Explicit and Implicit Grid</a></li> 117 <li><a href="/examples/example17">Grid auto-placement</a></li> 118 </ul> 119 </div> 120 121 </section> 122 123 <section class="learn-section"> 124 <h2>Placing items onto the grid</h2> 125 <div class="learn-video panel-box"> 126 <h3>Video and Presentations</h3> 127 <ul> 128 <li><a href="/video/series-line-based-placement/">Line-based placement</a></li> 129 <li><a href="/video/grid-template-areas/">Grid Template Areas</a></li> 130 </ul> 131 </div> 132 133 <div class="learn-article panel-box"> 134 <h3>Articles and blog posts</h3> 135 <ul> 136 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">MDN: Line-based placement</a></li> 137 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">MDN: Grid Template Areas</a></li> 138 </ul> 139 </div> 140 141 <div class="learn-examples panel-box"> 142 <h3>Example code</h3> 143 <ul> 144 <li><a href="/examples/example2">Line-based placement</a></li> 145 </ul> 146 </div> 147 148 </section> 149 150 <section class="learn-section"> 151 <h2>Sizing of tracks and items</h2> 152 <div class="learn-video panel-box"> 153 <h3>Video and Presentations</h3> 154 <ul> 155 <li><a href="/video/series-minmax/">Introducing minmax()</a></li> 156 <li><a href="/video/series-auto-fill-auto-fit/">Introducing auto-fill and auto-fit</a></li> 157 <li><a href="/video/content-sizing/">Sizing tracks with the content sizing keywords</a></li> 158 </ul> 159 </div> 160 161 <div class="learn-article panel-box"> 162 <h3>Articles and blog posts</h3> 163 <ul> 164 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#The_Grid_container">MDN: The grid container</a></li> 165 </ul> 166 </div> 167 168 <div class="learn-examples panel-box"> 169 <h3>Example code</h3> 170 <ul> 171 <li><a href="/examples/example36/">Percentage-based tracks and gaps</a></li> 172 <li><a href="/examples/example31/">Simple minmax() example</a></li> 173 <li><a href="/examples/example29/">minmax() spanning columns and rows</a></li> 174 </ul> 175 </div> 176 177 </section> 178 179 <section class="learn-section"> 180 <h2>Alignment of the grid and grid items</h2> 181 <div class="learn-video panel-box"> 182 <h3>Video and Presentations</h3> 183 <ul> 184 <li><a href="/video/align-grid-items/">Aligning and justifying Grid Items</a></li> 185 <li><a href="/video/align-grid/">Aligning and Justifying the Grid</a></li> 186 187 </ul> 188 </div> 189 190 <div class="learn-article panel-box"> 191 <h3>Articles and blog posts</h3> 192 <ul> 193 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">MDN: Box Alignment in CSS Grid Layout</a></li> 194 195 <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment cheatsheet</a></li> 196 </ul> 197 </div> 198 199 <div class="learn-examples panel-box"> 200 <h3>Example code</h3> 201 <ul> 202 <li><a href="/examples/example32/">Aligning the grid</a></li> 203 <li><a href="/examples/example33/">Using space-around and space-between</a></li> 204 </ul> 205 </div> 206 207 </section> 208 209 <section class="learn-section"> 210 <h2>How does grid work with Flexbox and other specs?</h2> 211 <div class="learn-video panel-box"> 212 <h3>Video and Presentations</h3> 213 <ul> 214 <li><a href="https://vimeo.com/215091807">Smashing Conference SF 2017: Laying out the future with grid and flexbox</a></li> 215 <li><a href="https://www.youtube.com/watch?v=MXEzJ-IncX0">Fluent 2016: Making Sense of the New CSS Layout</a></li> 216 </ul> 217 </div> 218 219 <div class="learn-article panel-box"> 220 <h3>Articles and blog posts</h3> 221 <ul> 222 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">MDN: Relationship of grid layout to other layout methods</a></li> 223 <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/">Smashing Magazine: Grid, Flexbox and Box Alignment</a></li> 224 <li><a href="https://rachelandrew.co.uk/archives/2017/01/18/css-grid-one-layout-method-not-the-only-layout-method/">CSS Grid. One layout method, not the only layout method</a></li> 225 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">MDN: Logical values and writing modes</a></li> 226 </ul> 227 </div> 228 229 <div class="learn-examples panel-box"> 230 <h3>Example code</h3> 231 <ul> 232 <li><a href="http://codepen.io/rachelandrew/pen/evjdLM">Flexible tracks with flexible number of columns. Comparing Grid and Flexbox.</a></li> 233 </ul> 234 </div> 235 236 </section> 237 238 <section class="learn-section"> 239 <h2>Accessibility, browsers and backwards compatibility</h2> 240 <div class="learn-video panel-box"> 241 <h3>Video and Presentations</h3> 242 <ul> 243 <li><a href="/video/feature-queries/">Feature Queries and grid</a></li> 244 <li><a href="https://vimeo.com/215091807">Smashing Conference SF 2017: Laying out the future with grid and flexbox (latter part covers fallbacks)</a></li> 245 </ul> 246 </div> 247 248 <div class="learn-article panel-box"> 249 <h3>Articles and blog posts</h3> 250 <ul> 251 <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Using CSS Grid: Supporting browsers without grid</a></li> 252 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">MDN: CSS Grid Layout and Progressive enhancement</a></li> 253 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">MDN: CSS Grid Layout and accessibility</a></li> 254 <li><a href="https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks">Fallbacks and Overrides cheatsheet</a></li> 255 <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Article about using the IE/Edge implementation</a></li> 256 </ul> 257 </div> 258 259 <div class="learn-examples panel-box"> 260 <h3>Example code</h3> 261 <ul> 262 <li><a href="http://codepen.io/collection/AQKYaW/">CodePen collection of simple override examples</a></li> 263 </ul> 264 </div> 265 266 </section> 267 268 </div> 269 <footer class="footer"><div class="wrapper"> 270 271 272 273 <p>This is a project by Rachel Andrew. Take a look at some of the other things I make.</p> 274 <ul> 275 <li><A href="https://grabaperch.com">Perch CMS</a> - the original Really Little CMS. Designed for speed and simple implementation.</li> 276 <li><A href="https://noti.st">Notist</a> - slide sharing and much more. Create your public speaking portfolio.</li> 277 <li>
277<A href="https://thecssworkshop.com">The CSS Workshop</a> - learn CSS Layout with me</li> 278 </ul> 279 280 <p class="thanks">This site is hosted on <a href="https://www.netlify.com/">Netlify</a>, thanks to their free hosting for open source projects.</p> 281 282</div> 283</footer> 284 285</body> 286 287</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.