CINXE.COM

<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><link rel="preload" href="/playground/component---src-layouts-index-js-745ea9f5fcaee4546906.js" as="script"/><link rel="preload" href="/playground/component---src-pages-css-grid-index-js-7b07f5d7da5ab790f682.js" as="script"/><link rel="preload" href="/playground/path---css-grid-a0e39f21c11f6a62c5ab.js" as="script"/><link rel="preload" href="/playground/app-8f1ccff5c7a42d45471a.js" as="script"/><link rel="preload" href="/playground/commons-801253a49cbae9e30f44.js" as="script"/><title data-react-helmet="true">CSS Grid PlayGround | Terminology | Mozilla</title><link data-react-helmet="true" rel="shortcut icon" type="image/x-icon" href="/playground/static/favicon.d4f1f46b.ico"/><link data-react-helmet="true" rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAAAAADlzdG3AAADZ0lEQVR4Ae3aIcyjShTF8SvGm/FqvBov8MEj0XgcComsxuNwuBosqgKFr0RUICrIfdu8NF/p6wwzdGE3L+fnb+jJv7tbkiUAAAAAAAAAAAAAAAAAAAAAAAAAgP8LIR/Exjv641QYF6eqfqhORRwq57sk//euKYssDn/PFKHDdYoWgqzqrhP/uF/bKtO0Rj/u7vxjGtoy0fQ1WV/XJa8HcT3M/F/z0CSSzGTcfLyb+jqS347oeF328lHaG5tMXSpNwZOL+W48fzlDtrwufX6U4DyxzXSJBS253Z0D8c2Is/sImd14zVQqeifzcf0ul4eUUBW76EJaUjW7aPQBJXTLbq7Lr1TgeteF+5YwbDAYk5cV4ZVdDeHOJVTH7saInvTA7ga9awnZMG/5NKplH63asYQ4sZ9W0oMs2c9J7lYiiW/sqRD0S3pnP1O0W4myZ1+3gIiCgX1d1F4lxpm91YJEyf7SvUpsMYYUjuyvVzuV2KSUFW+R/EUluM9G3qKVB5SYx6Hvrw4/Bd823Mf+193Ea+Zg7xHXukiiQOswSk8duxvKPA4fd3Fa9Ssjcv8Rxfmp6XjFkAcvrXV8ZjddGgh6kjod2KYV/ivUk4zYaq40LanizuvGTNGSrthiVPQFzTZTJumdyNdX9JGgd7K0PSikLwT2DZ8qi3xmuyH42N/S4p7uNqIQ9Ils2OoWGaoPbFTuM8Lyt3c4stf2p8ScsN5pxC0kA1HPbNYpMrC8ZfVinxGNIJPotuk3hCiOHmH7V1T2bNRrMgrHg0d0ksxq+58IE9UePCIXZGB9fZtiMhPlwSNCok3fC00W2bEjboos1JUNGkkW8f3QEb11hBjYoBTWgtdDR1TSOqJng9z+uOHQEaUgm4o/mxOy0d2hI1LaNGKK/d+MMQIjNo5o/9wIlEAJlEAJlEAJlEAJlEAJlEAJlEAJlEAJlEAJlEAJlCBf8kfIBrl8I9xGJKYLe4nB8CQjUTRPdccGfbOUS6cR86VunhLhXmJqfkROITr21xpGWJTCUsIi3+2/lDb+I06WEhZz9rePOG8bgRIogRIogRIogRIogRIo0bG/83JEvfF9ov1t7xPlxVt/Wo4oHE7SDyPKfv0wJgdCaX9K0CvlcrLx0ZLgbwEAAAAAAAAAAAAAAAAAAAAAAAAA/wDu9ByccrvLSQAAAABJRU5ErkJggg==" sizes="196x196"/><meta data-react-helmet="true" name="description" content="Learn about CSS Grid Layout and Firefox's CSS Grid Layout Tools."/><meta data-react-helmet="true" property="og:url" content="https://mozilladevelopers.github.io/playground/css-grid"/><meta data-react-helmet="true" property="og:title" content="CSS Grid Layout + Firefox = 鉂わ笍"/><meta data-react-helmet="true" property="og:description" content="CSS Grid Layout is a game-changer for web developers. Learn more about CSS Grid and the CSS Grid Layout panel in Firefox."/><meta data-react-helmet="true" property="og:image" content="/playground/static/fb.74b85bb9.png"/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:site" content="@firefox"/><meta data-react-helmet="true" name="twitter:creator" content="@firefox"/><meta data-react-helmet="true" name="twitter:title" content="CSS Grid Layout + Firefox = 鉂わ笍"/><meta data-react-helmet="true" name="twitter:description" content="CSS Grid Layout is a game-changer for web developers. Learn more about CSS Grid and the CSS Grid Layout panel in Firefox."/><meta data-react-helmet="true" name="twitter:image" content="https://i.imgur.com/NLUqs7J.png"/><style id="gatsby-inlined-css">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);@font-face{font-family:Antonio;src:local("Antonio Light"),local("Antonio-Light"),url(/playground/static/antonio-light.4b30712e.woff2) format("woff2"),url(/playground/static/antonio-light.6dea71fb.woff) format("woff"),url(/playground/static/antonio-light.ce004658.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Antonio;src:local("Antonio Bold"),local("Antonio-Bold"),url(/playground/static/antonio-bold.cee7b01b.woff2) format("woff2"),url(/playground/static/antonio-bold.eb8e8cd4.woff) format("woff"),url(/playground/static/antonio-bold.07cba0f6.ttf) format("truetype");font-weight:700;font-style:normal}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.my0{margin-top:0;margin-bottom:0}.mx0{margin-left:0;margin-right:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.my1{margin-top:.5rem;margin-bottom:.5rem}.mx1{margin-left:.5rem;margin-right:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.my2{margin-top:1rem;margin-bottom:1rem}.mx2{margin-left:1rem;margin-right:1rem}.m3{margin:1.5rem}.mt3{margin-top:1.5rem}.mr3{margin-right:1.5rem}.mb3{margin-bottom:1.5rem}.ml3{margin-left:1.5rem}.my3{margin-top:1.5rem;margin-bottom:1.5rem}.mx3{margin-left:1.5rem;margin-right:1.5rem}.m4{margin:2rem}.mt4{margin-top:2rem}.mr4{margin-right:2rem}.mb4{margin-bottom:2rem}.ml4{margin-left:2rem}.my4{margin-top:2rem;margin-bottom:2rem}.mx4{margin-left:2rem;margin-right:2rem}.m5{margin:2.5rem}.mt5{margin-top:2.5rem}.mr5{margin-right:2.5rem}.mb5{margin-bottom:2.5rem}.ml5{margin-left:2.5rem}.my5{margin-top:2.5rem;margin-bottom:2.5rem}.mx5{margin-left:2.5rem;margin-right:2.5rem}.m6{margin:3rem}.mt6{margin-top:3rem}.mr6{margin-right:3rem}.mb6{margin-bottom:3rem}.ml6{margin-left:3rem}.my6{margin-top:3rem;margin-bottom:3rem}.mx6{margin-left:3rem;margin-right:3rem}.m7{margin:3.5rem}.mt7{margin-top:3.5rem}.mr7{margin-right:3.5rem}.mb7{margin-bottom:3.5rem}.ml7{margin-left:3.5rem}.my7{margin-top:3.5rem;margin-bottom:3.5rem}.mx7{margin-left:3.5rem;margin-right:3.5rem}.m8{margin:4rem}.mt8{margin-top:4rem}.mr8{margin-right:4rem}.mb8{margin-bottom:4rem}.ml8{margin-left:4rem}.my8{margin-top:4rem;margin-bottom:4rem}.mx8{margin-left:4rem;margin-right:4rem}.m9{margin:4.5rem}.mt9{margin-top:4.5rem}.mr9{margin-right:4.5rem}.mb9{margin-bottom:4.5rem}.ml9{margin-left:4.5rem}.my9{margin-top:4.5rem;margin-bottom:4.5rem}.mx9{margin-left:4.5rem;margin-right:4.5rem}.m10{margin:5rem}.mt10{margin-top:5rem}.mr10{margin-right:5rem}.mb10{margin-bottom:5rem}.ml10{margin-left:5rem}.my10{margin-top:5rem;margin-bottom:5rem}.mx10{margin-left:5rem;margin-right:5rem}.m11{margin:5.5rem}.mt11{margin-top:5.5rem}.mr11{margin-right:5.5rem}.mb11{margin-bottom:5.5rem}.ml11{margin-left:5.5rem}.my11{margin-top:5.5rem;margin-bottom:5.5rem}.mx11{margin-left:5.5rem;margin-right:5.5rem}.m12{margin:6rem}.mt12{margin-top:6rem}.mr12{margin-right:6rem}.mb12{margin-bottom:6rem}.ml12{margin-left:6rem}.my12{margin-top:6rem;margin-bottom:6rem}.mx12{margin-left:6rem;margin-right:6rem}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0{padding-left:0}.py0{padding-top:0;padding-bottom:0}.px0{padding-left:0;padding-right:0}.p1{padding:.5rem}.pt1{padding-top:.5rem}.pr1{padding-right:.5rem}.pb1{padding-bottom:.5rem}.pl1{padding-left:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.pt2{padding-top:1rem}.pr2{padding-right:1rem}.pb2{padding-bottom:1rem}.pl2{padding-left:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:1.5rem}.pt3{padding-top:1.5rem}.pr3{padding-right:1.5rem}.pb3{padding-bottom:1.5rem}.pl3{padding-left:1.5rem}.py3{padding-top:1.5rem;padding-bottom:1.5rem}.px3{padding-left:1.5rem;padding-right:1.5rem}.p4{padding:2rem}.pt4{padding-top:2rem}.pr4{padding-right:2rem}.pb4{padding-bottom:2rem}.pl4{padding-left:2rem}.py4{padding-top:2rem;padding-bottom:2rem}.px4{padding-left:2rem;padding-right:2rem}.p5{padding:2.5rem}.pt5{padding-top:2.5rem}.pr5{padding-right:2.5rem}.pb5{padding-bottom:2.5rem}.pl5{padding-left:2.5rem}.py5{padding-top:2.5rem;padding-bottom:2.5rem}.px5{padding-left:2.5rem;padding-right:2.5rem}.p6{padding:3rem}.pt6{padding-top:3rem}.pr6{padding-right:3rem}.pb6{padding-bottom:3rem}.pl6{padding-left:3rem}.py6{padding-top:3rem;padding-bottom:3rem}.px6{padding-left:3rem;padding-right:3rem}.p7{padding:3.5rem}.pt7{padding-top:3.5rem}.pr7{padding-right:3.5rem}.pb7{padding-bottom:3.5rem}.pl7{padding-left:3.5rem}.py7{padding-top:3.5rem;padding-bottom:3.5rem}.px7{padding-left:3.5rem;padding-right:3.5rem}.p8{padding:4rem}.pt8{padding-top:4rem}.pr8{padding-right:4rem}.pb8{padding-bottom:4rem}.pl8{padding-left:4rem}.py8{padding-top:4rem;padding-bottom:4rem}.px8{padding-left:4rem;padding-right:4rem}.p9{padding:4.5rem}.pt9{padding-top:4.5rem}.pr9{padding-right:4.5rem}.pb9{padding-bottom:4.5rem}.pl9{padding-left:4.5rem}.py9{padding-top:4.5rem;padding-bottom:4.5rem}.px9{padding-left:4.5rem;padding-right:4.5rem}.p10{padding:5rem}.pt10{padding-top:5rem}.pr10{padding-right:5rem}.pb10{padding-bottom:5rem}.pl10{padding-left:5rem}.py10{padding-top:5rem;padding-bottom:5rem}.px10{padding-left:5rem;padding-right:5rem}.p11{padding:5.5rem}.pt11{padding-top:5.5rem}.pr11{padding-right:5.5rem}.pb11{padding-bottom:5.5rem}.pl11{padding-left:5.5rem}.py11{padding-top:5.5rem;padding-bottom:5.5rem}.px11{padding-left:5.5rem;padding-right:5.5rem}.p12{padding:6rem}.pt12{padding-top:6rem}.pr12{padding-right:6rem}.pb12{padding-bottom:6rem}.pl12{padding-left:6rem}.py12{padding-top:6rem;padding-bottom:6rem}.px12{padding-left:6rem;padding-right:6rem}.clearfix:after{clear:both;content:"";display:table}.center{margin-left:auto;margin-right:auto}.pull-right{float:right}.pull-left{float:left}.text-center{text-align:center}.hidden{display:none;visibility:hidden}@media (max-width:59.3125em){.hidden-mobile{display:none;visibility:hidden}}@media (min-width:59.375em){.hidden-desktop{display:none;visibility:hidden}}*{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;font-weight:400;margin:0;outline:0;padding:0;text-decoration:none;text-rendering:optimizeLegibility;list-style:none}body,html{min-height:100vh;min-width:100%}a{color:currentColor}textarea{resize:none}input,textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}html{color:#000;line-height:1.5;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p{margin-bottom:1rem}p.lead{font-size:21.328px;font-size:1.333rem;font-weight:300}em,i{font-style:italic;line-height:inherit}b,strong{font-weight:600}.small,small{font-size:12.003px;font-size:.75019rem}.h1,.h2,.h3,.h4,.h5,h1,h2,h3,h4,h5{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";font-weight:600;line-height:1.5}.h1,h1{font-size:37.89749px;font-size:2.36859rem;line-height:3rem}.h1,.h2,h1,h2{font-family:Antonio,Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";font-weight:300;text-transform:uppercase;margin-bottom:1rem}.h2,h2{font-size:28.43022px;font-size:1.77689rem;line-height:2rem;border-bottom:1px solid #eee;padding-bottom:2.5rem;margin-bottom:2.5rem}.h3,h3{font-size:21.328px;font-size:1.333rem;font-family:Antonio,Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";font-weight:700;text-transform:uppercase;margin-bottom:.5rem}.h3,.h4,h3,h4{line-height:1.5rem}.h4,h4{font-size:16px;font-size:1rem;margin-bottom:1rem}.h5,h5{font-size:12.003px;font-size:.75019rem;margin-bottom:.5rem;line-height:1.5rem}a{color:#306ffd;cursor:pointer;text-decoration:none;-webkit-transition:color .3s ease;transition:color .3s ease}a:focus,a:hover{color:#0069f2}a img,hr{border:0}hr{height:1px;background-color:#ccc;margin:1rem 0}dl,ol,ul{list-style-position:inside;line-height:inherit;margin-bottom:1rem}ol,ul{margin-left:1.25rem}ol,ul,ul.list li{list-style-type:disc}ul.list li{margin-left:1rem}ol.list{margin-left:2rem}ol.list li{list-style-type:number;margin-bottom:.5rem}p code{background-color:#f3f3f3;padding:0 2px}blockquote{font-size:21.328px;font-size:1.333rem;line-height:1.5;margin:0 0 .5rem;padding:.5rem 1rem;font-weight:300;border-left:5px solid #f2f2f2}dt{float:left;clear:left;width:100px;text-align:right;font-weight:700}dt:after{content:":"}dd{margin:0 0 0 110px;padding:0 0 .5rem}.shortcut{background:#fff;border-radius:5px;border:1px solid #d6dadc;border-bottom-color:#cdd2d4;-webkit-box-shadow:0 2px 3px rgba(0,0,0,.1);box-shadow:0 2px 3px rgba(0,0,0,.1);color:#4d4d4d;cursor:default;display:inline-block;font-size:14px;padding:0 8px;font-weight:700}.row:after{clear:both;content:"";display:table}.break{clear:both}.container{max-width:100%;height:100%;margin:0 auto;padding:0 .5rem}.container:after{clear:both;content:"";display:table}@media (min-width:46.875em){.container{width:750px}}@media (min-width:59.375em){.container{width:950px}}@media (min-width:75em){.container{width:1200px}}.col-xs-1{width:6.09756%;float:left;margin-right:2.43902%}.col-xs-1:last-child{margin-right:0}.col-xs-1--last{width:6.09756%;float:right}.col-xs-1--center{width:6.09756%;margin-left:auto;margin-right:auto}.col-xs-2{width:14.63415%;float:left;margin-right:2.43902%}.col-xs-2:last-child{margin-right:0}.col-xs-2--last{width:14.63415%;float:right}.col-xs-2--center{width:14.63415%;margin-left:auto;margin-right:auto}.col-xs-3{width:23.17073%;float:left;margin-right:2.43902%}.col-xs-3:last-child{margin-right:0}.col-xs-3--last{width:23.17073%;float:right}.col-xs-3--center{width:23.17073%;margin-left:auto;margin-right:auto}.col-xs-4{width:31.70732%;float:left;margin-right:2.43902%}.col-xs-4:last-child{margin-right:0}.col-xs-4--last{width:31.70732%;float:right}.col-xs-4--center{width:31.70732%;margin-left:auto;margin-right:auto}.col-xs-5{width:40.2439%;float:left;margin-right:2.43902%}.col-xs-5:last-child{margin-right:0}.col-xs-5--last{width:40.2439%;float:right}.col-xs-5--center{width:40.2439%;margin-left:auto;margin-right:auto}.col-xs-6{width:48.78049%;float:left;margin-right:2.43902%}.col-xs-6:last-child{margin-right:0}.col-xs-6--last{width:48.78049%;float:right}.col-xs-6--center{width:48.78049%;margin-left:auto;margin-right:auto}.col-xs-7{width:57.31707%;float:left;margin-right:2.43902%}.col-xs-7:last-child{margin-right:0}.col-xs-7--last{width:57.31707%;float:right}.col-xs-7--center{width:57.31707%;margin-left:auto;margin-right:auto}.col-xs-8{width:65.85366%;float:left;margin-right:2.43902%}.col-xs-8:last-child{margin-right:0}.col-xs-8--last{width:65.85366%;float:right}.col-xs-8--center{width:65.85366%;margin-left:auto;margin-right:auto}.col-xs-9{width:74.39024%;float:left;margin-right:2.43902%}.col-xs-9:last-child{margin-right:0}.col-xs-9--last{width:74.39024%;float:right}.col-xs-9--center{width:74.39024%;margin-left:auto;margin-right:auto}.col-xs-10{width:82.92683%;float:left;margin-right:2.43902%}.col-xs-10:last-child{margin-right:0}.col-xs-10--last{width:82.92683%;float:right}.col-xs-10--center{width:82.92683%;margin-left:auto;margin-right:auto}.col-xs-11{width:91.46341%;float:left;margin-right:2.43902%}.col-xs-11:last-child{margin-right:0}.col-xs-11--last{width:91.46341%;float:right}.col-xs-11--center{width:91.46341%;margin-left:auto;margin-right:auto}.col-xs-12{width:100%;float:left;margin-right:2.43902%}.col-xs-12:last-child{margin-right:0}.col-xs-12--last{width:100%;float:right}.col-xs-12--center{width:100%;margin-left:auto;margin-right:auto}@media (min-width:46.875em){.col-sm-1{width:6.09756%;float:left;margin-right:2.43902%}.col-sm-1:last-child{margin-right:0}.col-sm-1--last{width:6.09756%;float:right}.col-sm-1--center{width:6.09756%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-2{width:14.63415%;float:left;margin-right:2.43902%}.col-sm-2:last-child{margin-right:0}.col-sm-2--last{width:14.63415%;float:right}.col-sm-2--center{width:14.63415%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-3{width:23.17073%;float:left;margin-right:2.43902%}.col-sm-3:last-child{margin-right:0}.col-sm-3--last{width:23.17073%;float:right}.col-sm-3--center{width:23.17073%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-4{width:31.70732%;float:left;margin-right:2.43902%}.col-sm-4:last-child{margin-right:0}.col-sm-4--last{width:31.70732%;float:right}.col-sm-4--center{width:31.70732%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-5{width:40.2439%;float:left;margin-right:2.43902%}.col-sm-5:last-child{margin-right:0}.col-sm-5--last{width:40.2439%;float:right}.col-sm-5--center{width:40.2439%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-6{width:48.78049%;float:left;margin-right:2.43902%}.col-sm-6:last-child{margin-right:0}.col-sm-6--last{width:48.78049%;float:right}.col-sm-6--center{width:48.78049%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-7{width:57.31707%;float:left;margin-right:2.43902%}.col-sm-7:last-child{margin-right:0}.col-sm-7--last{width:57.31707%;float:right}.col-sm-7--center{width:57.31707%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-8{width:65.85366%;float:left;margin-right:2.43902%}.col-sm-8:last-child{margin-right:0}.col-sm-8--last{width:65.85366%;float:right}.col-sm-8--center{width:65.85366%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-9{width:74.39024%;float:left;margin-right:2.43902%}.col-sm-9:last-child{margin-right:0}.col-sm-9--last{width:74.39024%;float:right}.col-sm-9--center{width:74.39024%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-10{width:82.92683%;float:left;margin-right:2.43902%}.col-sm-10:last-child{margin-right:0}.col-sm-10--last{width:82.92683%;float:right}.col-sm-10--center{width:82.92683%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-11{width:91.46341%;float:left;margin-right:2.43902%}.col-sm-11:last-child{margin-right:0}.col-sm-11--last{width:91.46341%;float:right}.col-sm-11--center{width:91.46341%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-12{width:100%;float:left;margin-right:2.43902%}.col-sm-12:last-child{margin-right:0}.col-sm-12--last{width:100%;float:right}.col-sm-12--center{width:100%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-1{width:6.09756%;float:left;margin-right:2.43902%}.col-md-1:last-child{margin-right:0}.col-md-1--last{width:6.09756%;float:right}.col-md-1--center{width:6.09756%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-2{width:14.63415%;float:left;margin-right:2.43902%}.col-md-2:last-child{margin-right:0}.col-md-2--last{width:14.63415%;float:right}.col-md-2--center{width:14.63415%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-3{width:23.17073%;float:left;margin-right:2.43902%}.col-md-3:last-child{margin-right:0}.col-md-3--last{width:23.17073%;float:right}.col-md-3--center{width:23.17073%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-4{width:31.70732%;float:left;margin-right:2.43902%}.col-md-4:last-child{margin-right:0}.col-md-4--last{width:31.70732%;float:right}.col-md-4--center{width:31.70732%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-5{width:40.2439%;float:left;margin-right:2.43902%}.col-md-5:last-child{margin-right:0}.col-md-5--last{width:40.2439%;float:right}.col-md-5--center{width:40.2439%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-6{width:48.78049%;float:left;margin-right:2.43902%}.col-md-6:last-child{margin-right:0}.col-md-6--last{width:48.78049%;float:right}.col-md-6--center{width:48.78049%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-7{width:57.31707%;float:left;margin-right:2.43902%}.col-md-7:last-child{margin-right:0}.col-md-7--last{width:57.31707%;float:right}.col-md-7--center{width:57.31707%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-8{width:65.85366%;float:left;margin-right:2.43902%}.col-md-8:last-child{margin-right:0}.col-md-8--last{width:65.85366%;float:right}.col-md-8--center{width:65.85366%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-9{width:74.39024%;float:left;margin-right:2.43902%}.col-md-9:last-child{margin-right:0}.col-md-9--last{width:74.39024%;float:right}.col-md-9--center{width:74.39024%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-10{width:82.92683%;float:left;margin-right:2.43902%}.col-md-10:last-child{margin-right:0}.col-md-10--last{width:82.92683%;float:right}.col-md-10--center{width:82.92683%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-11{width:91.46341%;float:left;margin-right:2.43902%}.col-md-11:last-child{margin-right:0}.col-md-11--last{width:91.46341%;float:right}.col-md-11--center{width:91.46341%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-12{width:100%;float:left;margin-right:2.43902%}.col-md-12:last-child{margin-right:0}.col-md-12--last{width:100%;float:right}.col-md-12--center{width:100%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-1{width:6.09756%;float:left;margin-right:2.43902%}.col-lg-1:last-child{margin-right:0}.col-lg-1--last{width:6.09756%;float:right}.col-lg-1--center{width:6.09756%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-2{width:14.63415%;float:left;margin-right:2.43902%}.col-lg-2:last-child{margin-right:0}.col-lg-2--last{width:14.63415%;float:right}.col-lg-2--center{width:14.63415%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-3{width:23.17073%;float:left;margin-right:2.43902%}.col-lg-3:last-child{margin-right:0}.col-lg-3--last{width:23.17073%;float:right}.col-lg-3--center{width:23.17073%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-4{width:31.70732%;float:left;margin-right:2.43902%}.col-lg-4:last-child{margin-right:0}.col-lg-4--last{width:31.70732%;float:right}.col-lg-4--center{width:31.70732%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-5{width:40.2439%;float:left;margin-right:2.43902%}.col-lg-5:last-child{margin-right:0}.col-lg-5--last{width:40.2439%;float:right}.col-lg-5--center{width:40.2439%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-6{width:48.78049%;float:left;margin-right:2.43902%}.col-lg-6:last-child{margin-right:0}.col-lg-6--last{width:48.78049%;float:right}.col-lg-6--center{width:48.78049%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-7{width:57.31707%;float:left;margin-right:2.43902%}.col-lg-7:last-child{margin-right:0}.col-lg-7--last{width:57.31707%;float:right}.col-lg-7--center{width:57.31707%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-8{width:65.85366%;float:left;margin-right:2.43902%}.col-lg-8:last-child{margin-right:0}.col-lg-8--last{width:65.85366%;float:right}.col-lg-8--center{width:65.85366%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-9{width:74.39024%;float:left;margin-right:2.43902%}.col-lg-9:last-child{margin-right:0}.col-lg-9--last{width:74.39024%;float:right}.col-lg-9--center{width:74.39024%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-10{width:82.92683%;float:left;margin-right:2.43902%}.col-lg-10:last-child{margin-right:0}.col-lg-10--last{width:82.92683%;float:right}.col-lg-10--center{width:82.92683%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-11{width:91.46341%;float:left;margin-right:2.43902%}.col-lg-11:last-child{margin-right:0}.col-lg-11--last{width:91.46341%;float:right}.col-lg-11--center{width:91.46341%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-12{width:100%;float:left;margin-right:2.43902%}.col-lg-12:last-child{margin-right:0}.col-lg-12--last{width:100%;float:right}.col-lg-12--center{width:100%;margin-left:auto;margin-right:auto}}.col-xs-offset-1{margin-left:6.09756%}.col-xs-offset-2{margin-left:14.63415%}.col-xs-offset-3{margin-left:23.17073%}.col-xs-offset-4{margin-left:31.70732%}.col-xs-offset-5{margin-left:40.2439%}.col-xs-offset-6{margin-left:48.78049%}.col-xs-offset-7{margin-left:57.31707%}.col-xs-offset-8{margin-left:65.85366%}.col-xs-offset-9{margin-left:74.39024%}.col-xs-offset-10{margin-left:82.92683%}.col-xs-offset-11{margin-left:91.46341%}.col-xs-offset-12{margin-left:100%}@media (min-width:46.875em){.col-sm-offset-1{margin-left:8.53659%}}@media (min-width:46.875em){.col-sm-offset-2{margin-left:17.07317%}}@media (min-width:46.875em){.col-sm-offset-3{margin-left:25.60976%}}@media (min-width:46.875em){.col-sm-offset-4{margin-left:34.14634%}}@media (min-width:46.875em){.col-sm-offset-5{margin-left:42.68293%}}@media (min-width:46.875em){.col-sm-offset-6{margin-left:51.21951%}}@media (min-width:46.875em){.col-sm-offset-7{margin-left:59.7561%}}@media (min-width:46.875em){.col-sm-offset-8{margin-left:68.29268%}}@media (min-width:46.875em){.col-sm-offset-9{margin-left:76.82927%}}@media (min-width:46.875em){.col-sm-offset-10{margin-left:85.36585%}}@media (min-width:46.875em){.col-sm-offset-11{margin-left:93.90244%}}@media (min-width:46.875em){.col-sm-offset-12{margin-left:102.43902%}}@media (min-width:59.375em){.col-md-offset-1{margin-left:8.53659%}}@media (min-width:59.375em){.col-md-offset-2{margin-left:17.07317%}}@media (min-width:59.375em){.col-md-offset-3{margin-left:25.60976%}}@media (min-width:59.375em){.col-md-offset-4{margin-left:34.14634%}}@media (min-width:59.375em){.col-md-offset-5{margin-left:42.68293%}}@media (min-width:59.375em){.col-md-offset-6{margin-left:51.21951%}}@media (min-width:59.375em){.col-md-offset-7{margin-left:59.7561%}}@media (min-width:59.375em){.col-md-offset-8{margin-left:68.29268%}}@media (min-width:59.375em){.col-md-offset-9{margin-left:76.82927%}}@media (min-width:59.375em){.col-md-offset-10{margin-left:85.36585%}}@media (min-width:59.375em){.col-md-offset-11{margin-left:93.90244%}}@media (min-width:59.375em){.col-md-offset-12{margin-left:102.43902%}}@media (min-width:75em){.col-lg-offset-1{margin-left:8.53659%}}@media (min-width:75em){.col-lg-offset-2{margin-left:17.07317%}}@media (min-width:75em){.col-lg-offset-3{margin-left:25.60976%}}@media (min-width:75em){.col-lg-offset-4{margin-left:34.14634%}}@media (min-width:75em){.col-lg-offset-5{margin-left:42.68293%}}@media (min-width:75em){.col-lg-offset-6{margin-left:51.21951%}}@media (min-width:75em){.col-lg-offset-7{margin-left:59.7561%}}@media (min-width:75em){.col-lg-offset-8{margin-left:68.29268%}}@media (min-width:75em){.col-lg-offset-9{margin-left:76.82927%}}@media (min-width:75em){.col-lg-offset-10{margin-left:85.36585%}}@media (min-width:75em){.col-lg-offset-11{margin-left:93.90244%}}@media (min-width:75em){.col-lg-offset-12{margin-left:102.43902%}}body{background-color:#fff}img{max-width:100%;height:auto;display:inline-block;vertical-align:middle}:focus{outline:0}textarea{height:auto;min-height:50px}select,textarea{border-radius:2px}select{width:100%}.main{padding-top:3rem;min-height:calc(100vh - 380px)}.content{padding-bottom:3rem;overflow-y:scroll}.content img{margin-bottom:1.5rem}@media (min-width:59.375em){.content{width:65.85366%;float:left;margin-right:2.43902%;padding-left:1.5rem}.content:last-child{margin-right:0}}@media (min-width:75em){.content{width:74.39024%;float:left;margin-right:2.43902%;padding-left:4.5rem}.content:last-child{margin-right:0}}.header{background-color:#2d68ee;background-image:linear-gradient(60deg,#1259fe,#003098);padding:1.5rem 0}.header__logo{float:left;display:inline-block;height:35px}.header__cta{float:right;border:2px solid #fff;color:#fff;background-color:transparent;font-size:14px;font-weight:700;padding:0 .5rem;line-height:35px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.header__cta:hover{background-color:hsla(0,0%,100%,.2)}.header__cta-download{margin-right:.5rem}.side{width:31.70732%;float:left;margin-right:2.43902%;border-right:1px solid #ededed;padding-bottom:2rem;display:none}.side:last-child{margin-right:0}@media (min-width:59.375em){.side{display:block}}@media (min-width:75em){.side{width:23.17073%;float:left;margin-right:2.43902%}.side:last-child{margin-right:0}}.side-nav__circle{float:left;background-color:#eee;height:40px;width:40px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.is-active .side-nav__circle{background-color:#ffc73d;background-image:linear-gradient(45deg,#ffc73d,#ff722a 99%)}.is-done .side-nav__circle{background-color:#c0d0f3}.side-nav__circle-inner{background-color:#fff;height:28px;width:28px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.side-nav__circle-inner img{margin-top:2px}.side-nav__page{margin-left:1.5rem;line-height:40px;color:#000}.is-active .side-nav__page{font-weight:700}.side-nav__line{background-color:#c0d0f3;width:4px;height:1.5rem;border-radius:2px;margin-left:18px;margin-top:.5rem;margin-bottom:.5rem;visibility:hidden}.side-nav__line.is-active{visibility:visible}.side-nav__wrap{height:40px;cursor:pointer}.side-nav__wrap:hover .side-nav__circle{background-color:#d5d5d5}.footer{padding:4rem;background-color:#000;color:#fff}.footer:after{clear:both;content:"";display:table}.footer__logo{height:2rem}.footer__header{font-weight:700;margin-bottom:1rem;margin-top:2rem;display:block}@media (min-width:59.375em){.footer__header{margin-top:0}}.footer__list{margin:0}.footer__list a{color:#fff}.footer__list a:hover{color:#e6e6e6}.footer__list li{margin-bottom:.5rem}.footer__div{background-color:#3e3e3e}.footer__legal{font-size:12.003px;font-size:.75019rem;margin:0}.footer__legal li{float:left;margin-right:1.5rem}.footer__legal a{color:#fff}.bottom-nav{padding:2rem 0;background-color:#306ffd;background-image:-webkit-gradient(linear,left top,right top,from(#2f6cfc),to(#0039b7));background-image:linear-gradient(90deg,#2f6cfc,#0039b7)}.bottom-nav__item{width:50%;float:left;padding:0 3rem;height:6rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-nav__item--right{border-left:1px solid hsla(0,0%,100%,.2);-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.bottom-nav__item--left{text-align:right;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@media (min-width:59.375em){.bottom-nav__item{padding:0 6rem}}.bottom-nav__inner{cursor:pointer;color:#fff}.bottom-nav__lead{display:block}.bottom-nav__title{font-size:21.328px;font-size:1.333rem;display:block;font-family:Antonio,Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";text-transform:uppercase;-webkit-transition:border-bottom .2s ease;transition:border-bottom .2s ease;border-bottom:2px solid transparent}.bottom-nav__title:hover{border-bottom:2px solid #fff}@media (min-width:59.375em){.bottom-nav__title{font-size:28.43022px;font-size:1.77689rem}}.homework{background-color:#1f2534;padding:2rem;color:#fff;text-align:center}.homework__logo{height:85px;display:block;margin-bottom:2rem;margin-left:auto;margin-right:auto}.homework__title{border-bottom:0;line-height:3rem;display:inline-block;margin-bottom:2rem;padding-bottom:0}.homework__title:after{content:" ";border-bottom:2px solid #306ffd;display:block;width:100%;margin-top:.5rem}.homework__content{text-align:left}.homework__content p code{background-color:#000}.homework__content a{color:#fff;text-decoration:underline}@media (min-width:59.375em){.homework__content{width:65.85366%;float:left;margin-right:2.43902%;margin-left:14.63415%}.homework__content:last-child{margin-right:0}}.cta{padding:4rem 0;background-color:blue;background-color:#0727a9;background-image:-webkit-gradient(linear,left top,right top,from(#0727a9),to(#0772ac));background-image:linear-gradient(90deg,#0727a9,#0772ac)}.cta__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (min-width:59.375em){.cta__content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.cta__logo{margin-bottom:2rem}@media (min-width:59.375em){.cta__logo{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}}.cta__text{font-size:37.89749px;font-size:2.36859rem;text-transform:uppercase;line-height:4rem;font-family:Antonio,Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";color:#fff;text-align:center;margin-bottom:2rem}@media (min-width:59.375em){.cta__text{-webkit-box-flex:2;-ms-flex:2 0 0px;flex:2 0 0;text-align:left;margin-bottom:0;padding:0 1rem}}@media (min-width:75em){.cta__text{font-size:50.51735px;font-size:3.15733rem}}@media (min-width:59.375em){.cta__download{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}}.button,button{font-size:16px;font-size:1rem;display:inline-block;font-weight:inherit;border-radius:2px;line-height:inherit;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:.25rem .5rem;border:2px solid transparent;background:#306ffd;-webkit-transition:all .3s ease;transition:all .3s ease;text-decoration:none}.button:active,.button:focus,.button:hover,button:active,button:focus,button:hover{background:#023ec5;text-decoration:none;outline:0;background-image:none}.button:disabled,button:disabled{cursor:not-allowed;opacity:.65;-webkit-box-shadow:none;box-shadow:none}.button-download{display:block;margin-bottom:1rem;background-color:#306efe;border-radius:100px;color:#fff;padding:1rem 2rem;border:none;-webkit-transition:all .3s ease;transition:all .3s ease;font-weight:700}.button-download:hover{background-color:#014cfa}.button--primary{color:#fff;background-color:#306ffd;border-color:#306ffd}.button--primary:active,.button--primary:focus,.button--primary:hover{color:#fff;background-color:#024ef8;border-color:#024ef8}.button--secondary{color:#fff;background-color:#1a1a1a;border-color:#1a1a1a}.button--secondary:active,.button--secondary:focus,.button--secondary:hover{color:#fff;background-color:#343434;border-color:#343434}.button-outline--primary{color:#306ffd;background-image:none;background-color:transparent;border-color:#306ffd}.button-outline--primary:active,.button-outline--primary:focus,.button-outline--primary:hover{color:#fff;background-color:#306ffd;border-color:#306ffd}.button-outline--secondary{color:#1a1a1a;background-image:none;background-color:transparent;border-color:#1a1a1a}.button-outline--secondary:active,.button-outline--secondary:focus,.button-outline--secondary:hover{color:#fff;background-color:#1a1a1a;border-color:#1a1a1a}.button--large{font-size:21.328px;font-size:1.333rem;padding:.75rem 1.25rem}.button--small{font-size:12.003px;font-size:.75019rem;padding:.25rem .75rem}.button--block{display:block;width:100%}.button--block+.button--block{margin-top:.5rem}input[type=button].button--block,input[type=reset].button--block,input[type=submit].button--block{width:100%}.hero{padding:5rem 0 9rem;background-color:#306ffd;background-image:linear-gradient(60deg,#306efe,#003ab7);text-align:center;color:#fff;position:relative}.hero h1{margin:0}.hero h3{display:inline-block;margin-bottom:2rem}.hero h3:after{content:" ";border-bottom:3px solid #fff;display:block;width:100%;margin-top:.5rem}.hero__breadcrumb{float:left;font-weight:700;margin-top:-4rem;cursor:pointer;font-size:14px;opacity:.7;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.hero__breadcrumb span{color:#fff;font-weight:700;margin-left:.5rem}.hero__breadcrumb:hover{opacity:1}.hero--gray{background-color:#ecf1fc;background-image:none;text-align:left}.hero--gray .hero__breadcrumb span{color:#000}.hero--gray .hero__breadcrumb img{display:none}.hero__div{position:absolute;bottom:0;left:0;width:100%;height:auto;margin-bottom:-1px}.code-block{background-color:#f4f7fe;padding:0 2rem;border-left:.5rem solid #306ffd;overflow:scroll;margin-bottom:2rem;margin-top:2rem;color:#000}.term{margin-bottom:1.5rem}.term:after{clear:both;content:"";display:table}.term__img{width:31.70732%;float:left;margin-right:2.43902%}.term__img:last-child{margin-right:0}.term__text{width:65.85366%;margin-right:2.43902%;padding-left:1rem;float:left;padding-top:1rem}.term__text:last-child{margin-right:0}.term__name{font-weight:700}.download-button{border:2px solid #fff;color:#fff;background-color:transparent;font-size:14px;font-weight:700;padding:0 .5rem;line-height:35px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.download-button:hover{background-color:hsla(0,0%,100%,.2)}.download-button.float-left{float:left}.download-button.float-right{float:right}.download-white{font-size:16px;font-size:1rem;border:0 solid #fff;color:#306ffd;background-color:#fff;border-radius:50px;padding:1rem 1.5rem;-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);-webkit-transition:-webkit-box-shadow .2s ease;transition:-webkit-box-shadow .2s ease;transition:box-shadow .2s ease;transition:box-shadow .2s ease,-webkit-box-shadow .2s ease;font-weight:700}.download-white:active,.download-white:focus,.download-white:hover{background-color:#fff;-webkit-box-shadow:0 0 20px rgba(0,0,0,.7);box-shadow:0 0 20px rgba(0,0,0,.7)}.download-white.float-left{float:left}.download-white.float-right{float:right}.download-white img{margin-right:10px;max-width:none;height:14px}.download-button__icon{margin-right:.5rem}.tutorial-list{padding:4rem 0 8rem}.tutorial-list__title{border-bottom:0 solid transparent;padding-bottom:0;margin-bottom:6rem;text-align:center}.tutorial-item{margin-bottom:4rem}@media (min-width:59.375em){.tutorial-item{margin-bottom:0}}.tutorial-item__img{margin-bottom:1.5rem;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.tutorial-item__img:hover{opacity:.8}.tutorial-item__title{border-bottom:0 solid transparent;margin-bottom:1.5rem;padding-bottom:0}.tutorial-item__btn{background-color:transparent;border:2px solid #306ffd;border-radius:20px;padding:.5rem 1.5rem;font-weight:700;color:#306ffd;margin-top:1rem}.tutorial-item__btn img{margin-left:.5rem}.tutorial-item__btn:hover{color:#306ffd;background-color:#e1eaff}.not-found__dino{height:300px}@media (min-width:59.375em){.not-found__dino{width:48.78049%;float:left;margin-right:2.43902%}.not-found__dino:last-child{margin-right:0}}.not-found__dino img{height:300px;margin-left:auto;margin-right:auto;display:block}@media (min-width:59.375em){.not-found__dino img{float:right;margin:0}}.not-found__text{color:#000;text-align:center;margin-top:1.5rem}@media (min-width:59.375em){.not-found__text{width:48.78049%;float:left;margin-right:2.43902%;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:300px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:0}.not-found__text:last-child{margin-right:0}}.img-caption__img{margin-bottom:0!important}.img-caption__text{width:100%;display:block;background-color:#ebebeb;margin-bottom:1.5rem;text-align:center;padding:.5rem;font-size:14px}.img-caption--dark .img-caption__text{background-color:#282828;color:#fff}.video-player{border-bottom:1px solid #eee;margin-bottom:2rem;cursor:pointer}.video-player__text{border-bottom:0 transparent;margin-bottom:0;display:inline-block;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.video-player__text:hover{opacity:.8}.video-player__icon{height:2rem;margin-left:.5rem;vertical-align:middle;top:3px;position:relative;opacity:.6}.modal-video-close-btn:hover{background-color:transparent}.container-2{display:grid;grid-template-columns:150px 150px 150px;grid-template-rows:150px 150px;grid-gap:1rem}.container-4{display:grid;width:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,150px);grid-gap:1rem}.container-5{width:100%;display:grid;grid-template-columns:100px 30% 1fr;grid-template-rows:200px 100px;grid-gap:1rem}.container-6{display:grid;width:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,100px);grid-auto-rows:150px;grid-gap:1rem}.item1{grid-row:2/3;grid-column:2/3}.container-7{display:grid;width:100%;height:600px;grid-template-columns:200px 1fr 1fr;grid-template-rows:80px 1fr 1fr 100px;grid-gap:1rem}.header-7{grid-row:1/2;grid-column:1/4}.sidebar-7{grid-row:2/4;grid-column:1/2}.content-1-7{grid-row:2/3;grid-column:2/4}.content-2-7{grid-row:3/4;grid-column:2/3}.content-3-7{grid-row:3/4;grid-column:3/4}.footer-7{grid-row:4/5;grid-column:1/4}.container-8{display:grid;width:100%;height:600px;grid-template-columns:200px 1fr 1fr;grid-template-rows:80px 1fr 1fr 100px;grid-gap:1rem;grid-template-areas:"header header header" "sidebar content-1 content-1" "sidebar content-2 content-3" "footer footer footer"}.header-8{grid-area:header}.sidebar-8{grid-area:sidebar}.content-1-8{grid-area:content-1}.content-2-8{grid-area:content-2}.content-3-8{grid-area:content-3}.footer-8{grid-area:footer}.container-9{display:grid;width:100%;height:600px;grid-gap:1rem;grid-template-columns:[main-start sidebar-start] 200px [sidebar-end content-start] 1fr [column3-start] 1fr [content-end main-end];grid-template-rows:[row1-start] 80px [row2-start] 1fr [row3-start] 1fr [row4-start] 100px [row4-end]}.header-9{grid-column:main-start/main-end;grid-row:row1-start/row2-start}.sidebar-9{grid-column:sidebar-start/sidebar-end;grid-row:row2-start/row4-start}.content-1-9{grid-column:content-start/content-end;grid-row:row2-start/row3-start}.content-2-9{grid-column:content-start/column3-start}.content-2-9,.content-3-9{grid-row:row3-start/row4-start}.content-3-9{grid-column:column3-start/content-end}.footer-9{grid-column:main-start/main-end;grid-row:row4-start/row4-end}.item{background-color:#1eaafc;background-image:linear-gradient(130deg,#6c52d9,#1eaafc 85%,#3edfd7);-webkit-box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);color:#fff;border-radius:4px;border:6px solid #171717;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:18px;font-weight:700}.header-7,.header-8,.header-9{background-color:#1eaafc;background-image:linear-gradient(160deg,#6c52d9,#9b8ae6 127%)}.sidebar-7,.sidebar-8,.sidebar-9{background-image:linear-gradient(203deg,#3edfd7,#29a49d 90%)}.content-1-7,.content-1-8,.content-1-9,.content-2-7,.content-2-8,.content-2-9,.content-3-7,.content-3-8,.content-3-9{background-image:linear-gradient(130deg,#6c52d9,#1eaafc 85%,#3edfd7)}.footer-7,.footer-8,.footer-9{background-color:#6c52d9;background-image:linear-gradient(160deg,#6c52d9,#9b8ae6 127%)}.test{border:4px solid #000;background-color:rgba(0,0,0,.5);color:#fff;padding:1rem;text-align:center;margin-bottom:1rem}.gallery{float:left;margin-right:-100%}.gallery:nth-child(3n+1){width:31.70732%;clear:both;margin-left:0}.gallery:nth-child(3n+2){width:31.70732%;clear:none;margin-left:34.14634%}.gallery:nth-child(3n+3){width:31.70732%;clear:none;margin-left:68.29268%}@-webkit-keyframes modal-video{0%{opacity:0}to{opacity:1}}@keyframes modal-video{0%{opacity:0}to{opacity:1}}@-webkit-keyframes modal-video-inner{0%{-webkit-transform:translateY(100px);transform:translateY(100px)}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes modal-video-inner{0%{-webkit-transform:translateY(100px);transform:translateY(100px)}to{-webkit-transform:translate(0);transform:translate(0)}}.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1000000;cursor:pointer;opacity:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:modal-video;animation-name:modal-video;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.modal-video-effect-leave{opacity:0}.modal-video-effect-leave .modal-video-movie-wrap{-webkit-transform:translateY(100px);transform:translateY(100px)}.modal-video-body{max-width:940px;width:100%;height:100%;margin:0 auto;display:table}.modal-video-inner{display:table-cell;vertical-align:middle;width:100%;height:100%}.modal-video-movie-wrap{width:100%;height:0;position:relative;padding-bottom:56.25%;background-color:#333;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:modal-video-inner;animation-name:modal-video-inner;-webkit-transform:translate(0);transform:translate(0);-webkit-transition:-webkit-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out}.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}.modal-video-close-btn{position:absolute;z-index:2;top:-35px;right:-35px;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:transparent}.modal-video-close-btn:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.modal-video-close-btn:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.modal-video-close-btn:after,.modal-video-close-btn:before{content:"";position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px}</style></head><body><div id="___gatsby"><div class="wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1753375741"><header class="header" data-reactid="3"><div class="container" data-reactid="4"><a href="/playground/" data-reactid="5"><img alt="logo" class="header__logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTA1cHgiIGhlaWdodD0iMzVweCIgdmlld0JveD0iMCAwIDEwNSAzNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDYuMiAoNDQ0OTYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkxvZ288L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0yQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTEyLjAwMDAwMCwgLTI5LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5NC4wMDAwMDAsIC04NDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iTG9nbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDA2LjAwMDAwMCwgODcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtOSIgZmlsbD0iIzAwMDAwMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwNSIgaGVpZ2h0PSIzNSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05OC4yNzE4Mzc3LDI0LjMwMTQwNTYgTDk4LjMyODE1NDUsMjYuMjQxNzA4NyBDOTcuNjUyMzUyNCwyNi42MTI2NDg5IDk2LjgzNTc1ODEsMjYuODQwOTE5OSA5Ni4wNDczMjIzLDI2Ljg0MDkxOTkgQzk0LjMyOTY1ODYsMjYuODQwOTE5OSA5My40Mjg1ODkxLDI1Ljg3MDc2ODQgOTMuMjMxNDgwMSwyNC4zMDE0MDU2IEM5Mi41Mjc1MTk1LDI1LjU4NTQyOTcgOTEuMjMyMjMyMSwyNi44NDA5MTk5IDg5LjE3NjY2NzMsMjYuODQwOTE5OSBDODcuMzQ2MzY5OSwyNi44NDA5MTk5IDg1LjI5MDgwNSwyNS44NzA3Njg0IDg1LjI5MDgwNSwyMy4xNjAwNTA5IEM4NS4yOTA4MDUsMjAuMDIxMzI1NSA4OC4yNDc0Mzk0LDE5LjI3OTQ0NDkgOTEuMjA0MDczNywxOS4yNzk0NDQ5IEM5MS44Nzk4NzU4LDE5LjI3OTQ0NDkgOTIuNjExOTk0OCwxOS4yNzk0NDQ5IDkzLjIzMTQ4MDEsMTkuMzkzNTgwNCBMOTMuMjMxNDgwMSwxOC45NjU1NzI0IEM5My4yMzE0ODAxLDE3LjYyNDQ4MDYgOTMuMjMxNDgwMSwxNi4wODM2NTE3IDkxLjIwNDA3MzcsMTYuMDgzNjUxNyBDOTAuNDE1NjM3OSwxNi4wODM2NTE3IDg5LjgyNDMxMSwxNi4xMTIxODU2IDg5LjIzMjk4NDEsMTYuNDU0NTkyIEw4OC44MTA2MDc4LDE3LjkwOTgxOTIgTDg1LjkzODQ0ODcsMTcuNTY3NDEyOCBMODYuNDE3MTQxOSwxNC41OTk4OTA2IEM4OC42MTM0OTg5LDEzLjcxNTM0MDcgODkuNzk2MTUyNiwxMy40MzAwMDIgOTEuODc5ODc1OCwxMy40MzAwMDIgQzk0LjU1NDkyNTksMTMuNDMwMDAyIDk2LjkyMDIzMzQsMTQuODg1MjI5MyA5Ni45MjAyMzM0LDE3LjgyNDIxNzYgTDk2LjkyMDIzMzQsMjMuMzg4MzIxOSBDOTYuOTIwMjMzNCwyNC4xNTg3MzYzIDk3LjIwMTgxNzYsMjQuMzg3MDA3MiA5Ny43OTMxNDQ1LDI0LjM4NzAwNzIgQzk3LjkwNTc3ODIsMjQuMzg3MDA3MiA5OC4xMDI4ODcxLDI0LjM4NzAwNzIgOTguMjcxODM3NywyNC4zMDE0MDU2IFogTTkwLjUwMDExMzEsMjQuMjQ0MzM3OSBDOTEuNzk1NDAwNiwyNC4yNDQzMzc5IDkzLjE0NzAwNDgsMjMuMjQ1NjUyNSA5My4yMzE0ODAxLDIxLjEzNDE0NjMgQzkyLjY0MDE1MzIsMjEuMDQ4NTQ0NyA5Mi4wMjA2Njc5LDIwLjk2Mjk0MzEgOTEuNDI5MzQxMSwyMC45NjI5NDMxIEM5MC4xMzQwNTM3LDIwLjk2Mjk0MzEgODguOTc5NTU4MywyMS4zMDUzNDk1IDg4Ljk3OTU1ODMsMjIuNzYwNTc2OCBDODguOTc5NTU4MywyMy41NTk1MjUxIDg5LjQzMDA5MzEsMjQuMjQ0MzM3OSA5MC41MDAxMTMxLDI0LjI0NDMzNzkgWiBNODIuMDI0NDI4MSw2LjkyNDI4MDEyIEw4NS42MDA1NDc3LDYuOTI0MjgwMTIgTDgwLjEwOTY1NTMsMjYuNTU1NTgxMiBMNzYuNTYxNjk0MSwyNi41NTU1ODEyIEw4Mi4wMjQ0MjgxLDYuOTI0MjgwMTIgWiBNNzQuNjc1MDc5OSw2LjkyNDI4MDEyIEw3OC4yNTExOTk1LDYuOTI0MjgwMTIgTDcyLjc2MDMwNzEsMjYuNTU1NTgxMiBMNjkuMTg0MTg3NSwyNi41NTU1ODEyIEw3NC42NzUwNzk5LDYuOTI0MjgwMTIgWiBNNjMuMDE3NDkzMSwxOC4zMDkyOTM0IEw2Ni43OTA3MjE2LDE4LjMwOTI5MzQgTDY2Ljc5MDcyMTYsMTMuNjg2ODA2OCBMNjMuMDE3NDkzMSwxMy42ODY4MDY4IEw2My4wMTc0OTMxLDE4LjMwOTI5MzQgWiBNNjMuMDE3NDkzMSwyNi41NTU1ODEyIEw2Ni43OTA3MjE2LDI2LjU1NTU4MTIgTDY2Ljc5MDcyMTYsMjEuOTMzMDk0NiBMNjMuMDE3NDkzMSwyMS45MzMwOTQ2IEw2My4wMTc0OTMxLDI2LjU1NTU4MTIgWiBNNTYuODc4OTU3LDIzLjc4Nzc5NiBMNTIuNzY3ODI3NCwyMy43ODc3OTYgTDU5LjgwNzQzMjksMTUuNTk4NTc1OSBMNTkuNTI1ODQ4NywxMy42ODY4MDY4IEw0OC4zNDY5NTUxLDEzLjY4NjgwNjggTDQ3Ljg5NjQyMDMsMTguMTk1MTU3OSBMNTAuNTcxNDcwNCwxOC40ODA0OTY2IEw1MS4xMzQ2Mzg5LDE2LjQ1NDU5MiBMNTUuMDc2ODE4LDE2LjQ1NDU5MiBMNDguMDkzNTI5MywyNC42MTUyNzgyIEw0OC40NTk1ODg4LDI2LjU1NTU4MTIgTDU5LjU4MjE2NTUsMjYuNTU1NTgxMiBMNjAuMzQyNDQyOSwyMi4wNDcyMzAxIEw1Ny40NzAyODM5LDIxLjc5MDQyNTMgTDU2Ljg3ODk1NywyMy43ODc3OTYgWiBNMzkuMjc5OTQzMSwxMy40MzAwMDIgQzQzLjg0MTYwNzUsMTMuNDMwMDAyIDQ2LjA5NDI4MTMsMTYuNTQwMTkzNiA0Ni4wOTQyODEzLDIwLjE2Mzk5NDggQzQ2LjA5NDI4MTMsMjQuMjQ0MzM3OSA0My4xMzc2NDcsMjYuODQwOTE5OSAzOS4wODI4MzQyLDI2Ljg0MDkxOTkgQzM1LjE0MDY1NTEsMjYuODQwOTE5OSAzMi40NjU2MDQ5LDI0LjQ0NDA3NSAzMi40NjU2MDQ5LDIwLjMwNjY2NDEgQzMyLjQ2NTYwNDksMTYuNTQwMTkzNiAzNC43MTgyNzg3LDEzLjQzMDAwMiAzOS4yNzk5NDMxLDEzLjQzMDAwMiBaIE0zOS4xNjczMDk0LDI0LjAxNjA2NyBDNDEuMDgyMDgyMSwyNC4wMTYwNjcgNDIuMzIxMDUyNywyMi40NzUyMzgxIDQyLjMyMTA1MjcsMjAuMDIxMzI1NSBDNDIuMzIxMDUyNywxNy40NTMyNzc0IDQwLjk0MTI5LDE2LjI1NDg1NDkgMzkuMjIzNjI2MywxNi4yNTQ4NTQ5IEMzNy4zNjUxNzA0LDE2LjI1NDg1NDkgMzYuMTgyNTE2NywxNy42ODE1NDgzIDM2LjE4MjUxNjcsMjAuMDc4MzkzMiBDMzYuMTgyNTE2NywyMi4yNzU1MDEgMzcuMjI0Mzc4MywyNC4wMTYwNjcgMzkuMTY3MzA5NCwyNC4wMTYwNjcgWiBNMjkuMTk5MjI4LDE3LjkwOTgxOTIgQzI5LjE5OTIyOCwxNC44MjgxNjE1IDI3LjA4NzM0NjMsMTMuNDMwMDAyIDI0Ljg2MjgzMDksMTMuNDMwMDAyIEMyMi44MzU0MjQ1LDEzLjQzMDAwMiAyMS4zNzExODY2LDE0LjUxNDI4OSAyMC42OTUzODQ1LDE2LjIyNjMyMSBDMjAuMTA0MDU3NiwxNC4zMTQ1NTE5IDE4LjQxNDU1MjMsMTMuNDMwMDAyIDE2LjU1NjA5NjQsMTMuNDMwMDAyIEMxNC43ODIxMTU4LDEzLjQzMDAwMiAxMy40NTg2Njk5LDE0LjI4NjAxOCAxMi42OTgzOTI1LDE1LjYyNzEwOTggTDEyLjY5ODM5MjUsMTMuNjg2ODA2OCBMNy4zNzY0NTA3NCwxMy42ODY4MDY4IEw3LjM3NjQ1MDc0LDE2LjQ4MzEyNTkgTDkuMDY1OTU2MDgsMTYuNDgzMTI1OSBMOS4wNjU5NTYwOCwyMy43ODc3OTYgTDcuMzc2NDUwNzQsMjMuNzg3Nzk2IEw3LjM3NjQ1MDc0LDI2LjU1NTU4MTIgTDE1LjA5MTg1ODQsMjYuNTU1NTgxMiBMMTUuMDkxODU4NCwyMy43ODc3OTYgTDEyLjY5ODM5MjUsMjMuNzg3Nzk2IEwxMi42OTgzOTI1LDE5LjI3OTQ0NDkgQzEyLjY5ODM5MjUsMTcuNDgxODExMiAxMy40MzA1MTE1LDE2LjIyNjMyMSAxNS4xNDgxNzUzLDE2LjIyNjMyMSBDMTYuNTU2MDk2NCwxNi4yMjYzMjEgMTcuMzE2MzczOCwxNy4xMTA4NzA5IDE3LjMxNjM3MzgsMTkuMzM2NTEyNiBMMTcuMzE2MzczOCwyNi41NTU1ODEyIEwyMi42MzgzMTU2LDI2LjU1NTU4MTIgTDIyLjYzODMxNTYsMjMuNzg3Nzk2IEwyMC45NDg4MTAzLDIzLjc4Nzc5NiBMMjAuOTQ4ODEwMywxOS4yNzk0NDQ5IEMyMC45NDg4MTAzLDE3LjQ4MTgxMTIgMjEuNjUyNzcwOCwxNi4yMjYzMjEgMjMuMzcwNDM0NiwxNi4yMjYzMjEgQzI0Ljg2MjgzMDksMTYuMjI2MzIxIDI1LjU5NDk0OTksMTcuMTEwODcwOSAyNS41OTQ5NDk5LDE5LjMzNjUxMjYgTDI1LjU5NDk0OTksMjYuNTU1NTgxMiBMMzAuOTE2ODkxNywyNi41NTU1ODEyIEwzMC45MTY4OTE3LDIzLjc4Nzc5NiBMMjkuMTk5MjI4LDIzLjc4Nzc5NiBMMjkuMTk5MjI4LDE3LjkwOTgxOTIgWiIgaWQ9Im1vemlsbGEiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" data-reactid="6"/></a><a href="https://www.mozilla.org/firefox/developer/?utm_source=moz-playground&utm_medium=referral&utm_content=header" target="_blank" rel="noopener noreferrer" data-reactid="7"><button class="download-button undefined float-right" data-reactid="8"><img class="download-button__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMTEgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0xQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIxMi4wMDAwMDAsIC00Mi4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOTMuMDAwMDAwLCAtNTgzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkxpbmtzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTgzLjAwMDAwMCwgNjEwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTEuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4zMjA0NDIsIDIwLjI0NDg1Mikgc2NhbGUoLTEsIC0xKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTE2LjMyMDQ0MiwgLTIwLjI0NDg1MikgdHJhbnNsYXRlKDEwLjgyMDQ0MiwgMTUuMjQ0ODUyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuNDYyNTM3MSw1LjYwMTg0ODQxIEMxMC43OTQ4NzY0LDUuMjU5NDA1OTYgMTAuNzkxMjg4OSw0LjcwNDA1Nzk5IDEwLjQ1ODYyMzQsNC4zNjE2MTU1NCBMNi41MDgwNTc0NCwwLjMwOTc2NzQ2OSBDNS41ODU3MjYwMywtMC42Mjk1NDExOTEgNC4yMDE5MDI3NiwwLjc3OTQyMTggNS4xMjQ1NjAzMiwxLjcxODczMDQ2IEw2Ljg0ODIyNDIzLDMuNDc0MTIxNjUgQzcuMTM0OTAzNjIsMy43NjYwNzc5MSA3LjAzOTM0MzgyLDQuMDAzNTYyMjQgNi42MzY1NTc2NSw0LjAwMzU2MjI0IEwwLjk3ODQyNzk1Miw0LjAwMzU2MjI0IEMwLjQzODAwOTU4LDQuMDAzNTYyMjQgMy41NTI3MTM2OGUtMTQsNC40NDk5NjYzNiAzLjU1MjcxMzY4ZS0xNCw1IEMzLjU1MjcxMzY4ZS0xNCw1LjU1MDAzMzY0IDAuNDM4MDA5NTgsNS45OTY0Mzc3NiAwLjk3ODQyNzk1Miw1Ljk5NjQzNzc2IEw2LjYzNjU1NzY1LDUuOTk2NDM3NzYgQzcuMDQwNjQ4MzksNS45OTY0Mzc3NiA3LjEzNzE4NjYyLDYuMjMyNTkzNTEgNi44NDgyMjQyMyw2LjUyNzIwNjk0IEw1LjEyNDU2MDMyLDguMjgxMjY5NTQgQzQuMjAxOTAyNzYsOS4yMjA1NzgyIDUuNTg1NzI2MDMsMTAuNjI5NTQxMiA2LjUwODA1NzQ0LDkuNjkwMjMyNTMgTDEwLjQ2MjUzNzEsNS42MDE4NDg0MSBaIiBpZD0iUGFnZS0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjM1NDk4MiwgNS4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTUuMzU0OTgyLCAtNS4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" alt="download" data-reactid="9"/>Download Firefox</button></a></div></header><div data-reactid="11"><div class="hero " data-reactid="13"><div class="container" data-reactid="14"><a href="/playground/" data-reactid="15"><div class="hero__breadcrumb" data-reactid="16"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3LjEgKDQ1NDIyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5QYWdlIDE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0id2lyZXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSI0MDQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTIuMDAwMDAwLCAtMTI5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxNi4wMDAwMDAsIC03MDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4LjAwMDAwMCwgODI1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjUwMDAwMCwgMTMuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC02LjUwMDAwMCwgLTEzLjUwMDAwMCkgdHJhbnNsYXRlKDAuMDAwMDAwLCA3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNjI4MTIxNCw3LjI4MjQwMjkzIEMxMy4wNjgxMTUxLDYuODM3MjI3NzUgMTMuMDYzMzY1NCw2LjExNTI3NTM4IDEyLjYyMjk0LDUuNjcwMTAwMjEgTDcuMzkyNjcxMzgsMC40MDI2OTc3MSBDNi4xNzE1NzAxMiwtMC44MTg0MDM1NDkgNC4zMzk0ODY0NCwxLjAxMzI0ODM0IDUuNTYxMDE5NDksMi4yMzQzNDk2IEw3Ljg0MzAyODAzLDQuNTE2MzU4MTQgQzguMjIyNTcxMTcsNC44OTU5MDEyOCA4LjA5NjA1Njc5LDUuMjA0NjMwOTEgNy41NjI3OTY1Miw1LjIwNDYzMDkxIEwxLjI5NTM2OTA5LDUuMjA0NjMwOTEgQzAuNTc5ODkzNTYxLDUuMjA0NjMwOTEgMCw1Ljc4NDk1NjI2IDAsNi41IEMwLDcuMjE1MDQzNzQgMC41Nzk4OTM1NjEsNy43OTUzNjkwOSAxLjI5NTM2OTA5LDcuNzk1MzY5MDkgTDcuNTYyNzk2NTIsNy43OTUzNjkwOSBDOC4wOTc3ODM5NSw3Ljc5NTM2OTA5IDguMjI1NTkzNyw4LjEwMjM3MTU2IDcuODQzMDI4MDMsOC40ODUzNjkwMiBMNS41NjEwMTk0OSwxMC43NjU2NTA0IEM0LjMzOTQ4NjQ0LDExLjk4Njc1MTcgNi4xNzE1NzAxMiwxMy44MTg0MDM1IDcuMzkyNjcxMzgsMTIuNTk3MzAyMyBMMTIuNjI4MTIxNCw3LjI4MjQwMjkzIFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" alt="arrow left" data-reactid="17"/><span data-reactid="18">Playground Home</span></div></a></div><h3 data-reactid="19">Firefox DevTools</h3><h1 data-reactid="20">Introduction to CSS Grid Layout</h1><svg width="100%" height="47px" viewBox="0 0 1440 47" version="1.1" xmlns="http://www.w3.org/2000/svg" class="hero__div" preserveAspectRatio="none" data-reactid="21"><defs data-reactid="22"></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" data-reactid="23"><path d="M0,0.0577405639 C117.504588,18.44359 269.602477,22.1720696 456.293666,11.2431795 C562.076057,5.05068514 730.784198,0.911127653 885.297232,3.27366179 C1157.17617,7.43074321 1386.98062,21.3276838 1440,38.3891927 L1440,46.9388979 L0,46.9388979 L0,0.0577405639 Z" id="Path-9" fill="#FFFFFF" data-reactid="24"></path></g></svg></div><div class="main" data-reactid="25"><div class="container" data-reactid="26"><div class="side" data-reactid="27"><a href="/playground/css-grid" data-reactid="28"><div class="side-nav__item is-active" data-reactid="29"><div class="side-nav__wrap" data-reactid="30"><div class="side-nav__circle" data-reactid="31"><div class="side-nav__circle-inner" data-reactid="32"><img alt="current" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTYgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAyIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0zQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODguMDAwMDAwLCAtNTMwLjAwMDAwMCkiIGZpbGw9IiNGRjlFMkUiPgogICAgICAgICAgICA8ZyBpZD0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODAuMDAwMDAwLCA0MDkuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iU2lkZWJhciI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAxMTEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0yLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgMTcuMDAwMDAwKSBzY2FsZSgtMSwgLTEpIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTYuMDAwMDAwLCAtMTcuMDAwMDAwKSB0cmFuc2xhdGUoOS4wMDAwMDAsIDkuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQuNjEwMTM5Miw5LjI5Nzg1NzAyIEMxNS4xMTMxMDY4LDguNzg0NTM1IDE1LjEwNzY3NzMsNy45NTIwNjcwOSAxNC42MDQyMTYxLDcuNDM4NzQ1MDggTDkuNjI1MzY3MiwyLjM2NTAxNTQxIEM4LjIyOTQ5NjI1LDAuOTU2OTg5NTQ4IDYuMTM1MTk2MjUsMy4wNjkwMjgzNCA3LjUzMTU2MDc4LDQuNDc3MDU0MiBMOS4xNDAxODA5OCw2LjEwODM4OTY3IEM5LjU3NDA0NjEsNi41NDYwMzI3OCA5LjQyOTQyNDQsNi45MDIwMjIzNSA4LjgxOTg0MTQ0LDYuOTAyMDIyMzUgTDEuMjU2NzM4NTMsNi45MDIwMjIzNSBDMC40Mzg4NjA4MjMsNi45MDIwMjIzNSAtMC4yMjQwMjk3OTgsNy41NzExODMxNSAtMC4yMjQwMjk3OTgsOC4zOTU2ODQ4NiBDLTAuMjI0MDI5Nzk4LDkuMjIwMTg2NTcgMC40Mzg4NjA4MjMsOS44ODkzNDczNyAxLjI1NjczODUzLDkuODg5MzQ3MzcgTDguODE5ODQxNDQsOS44ODkzNDczNyBDOS40MzEzOTg3Niw5Ljg4OTM0NzM3IDkuNTc3NTAxMjMsMTAuMjQzMzQ1NCA5LjE0MDE4MDk4LDEwLjY4NDk3MTYgTDcuNTMxNTYwNzgsMTIuMzE0MzE1NSBDNi4xMzUxOTYyNSwxMy43MjIzNDE0IDguMjI5NDk2MjUsMTUuODM0MzgwMiA5LjYyNTM2NzIsMTQuNDI2MzU0MyBMMTQuNjEwMTM5Miw5LjI5Nzg1NzAyIFoiIGlkPSJQYWdlLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMzgwMjg1LCA4LjM5NTY4NSkgc2NhbGUoLTEsIDEpIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNy4zODAyODUsIC04LjM5NTY4NSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" data-reactid="33"/></div></div><span class="side-nav__page" data-reactid="35">Terminology</span></div><div class="side-nav__line" data-reactid="36"></div></div></a><a href="/playground/css-grid/02-first-grid/" data-reactid="37"><div class="side-nav__item" data-reactid="38"><div class="side-nav__wrap" data-reactid="39"><div class="side-nav__circle" data-reactid="40"><div class="side-nav__circle-inner" data-reactid="41"></div></div><span class="side-nav__page" data-reactid="44">Your First Grid</span></div><div class="side-nav__line" data-reactid="45"></div></div></a><a href="/playground/css-grid/03-firefox-devtools" data-reactid="46"><div class="side-nav__item" data-reactid="47"><div class="side-nav__wrap" data-reactid="48"><div class="side-nav__circle" data-reactid="49"><div class="side-nav__circle-inner" data-reactid="50"></div></div><span class="side-nav__page" data-reactid="53">Firefox DevTools</span></div><div class="side-nav__line" data-reactid="54"></div></div></a><a href="/playground/css-grid/04-fr-unit" data-reactid="55"><div class="side-nav__item" data-reactid="56"><div class="side-nav__wrap" data-reactid="57"><div class="side-nav__circle" data-reactid="58"><div class="side-nav__circle-inner" data-reactid="59"></div></div><span class="side-nav__page" data-reactid="62">The fr Unit</span></div><div class="side-nav__line" data-reactid="63"></div></div></a><a href="/playground/css-grid/05-mixing-units" data-reactid="64"><div class="side-nav__item" data-reactid="65"><div class="side-nav__wrap" data-reactid="66"><div class="side-nav__circle" data-reactid="67"><div class="side-nav__circle-inner" data-reactid="68"></div></div><span class="side-nav__page" data-reactid="71">Mixing Units</span></div><div class="side-nav__line" data-reactid="72"></div></div></a><a href="/playground/css-grid/06-position-items" data-reactid="73"><div class="side-nav__item" data-reactid="74"><div class="side-nav__wrap" data-reactid="75"><div class="side-nav__circle" data-reactid="76"><div class="side-nav__circle-inner" data-reactid="77"></div></div><span class="side-nav__page" data-reactid="80">Position Items</span></div><div class="side-nav__line" data-reactid="81"></div></div></a><a href="/playground/css-grid/07-basic-layout" data-reactid="82"><div class="side-nav__item" data-reactid="83"><div class="side-nav__wrap" data-reactid="84"><div class="side-nav__circle" data-reactid="85"><div class="side-nav__circle-inner" data-reactid="86"></div></div><span class="side-nav__page" data-reactid="89">Basic Layout</span></div><div class="side-nav__line" data-reactid="90"></div></div></a><a href="/playground/css-grid/08-template-areas" data-reactid="91"><div class="side-nav__item" data-reactid="92"><div class="side-nav__wrap" data-reactid="93"><div class="side-nav__circle" data-reactid="94"><div class="side-nav__circle-inner" data-reactid="95"></div></div><span class="side-nav__page" data-reactid="98">Template Areas</span></div><div class="side-nav__line" data-reactid="99"></div></div></a><a href="/playground/css-grid/09-named-lines" data-reactid="100"><div class="side-nav__item" data-reactid="101"><div class="side-nav__wrap" data-reactid="102"><div class="side-nav__circle" data-reactid="103"><div class="side-nav__circle-inner" data-reactid="104"></div></div><span class="side-nav__page" data-reactid="107">Named Lines</span></div><div class="side-nav__line" data-reactid="108"></div></div></a><a href="/playground/css-grid/10-learn-more" data-reactid="109"><div class="side-nav__item" data-reactid="110"><div class="side-nav__wrap" data-reactid="111"><div class="side-nav__circle" data-reactid="112"><div class="side-nav__circle-inner" data-reactid="113"></div></div><span class="side-nav__page" data-reactid="116">Learn More</span></div><div class="side-nav__line" data-reactid="117"></div></div></a></div><div class="content" data-reactid="118"><div data-reactid="119"><div class="video-player" data-reactid="120"><span data-reactid="121"></span><span data-reactid="122"><span class="h2 video-player__text" data-reactid="123">Launch Video Player</span><img class="video-player__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDEuOTk5IDQxLjk5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDEuOTk5IDQxLjk5OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTM2LjA2OCwyMC4xNzZsLTI5LTIwQzYuNzYxLTAuMDM1LDYuMzYzLTAuMDU3LDYuMDM1LDAuMTE0QzUuNzA2LDAuMjg3LDUuNSwwLjYyNyw1LjUsMC45OTl2NDANCgljMCwwLjM3MiwwLjIwNiwwLjcxMywwLjUzNSwwLjg4NmMwLjE0NiwwLjA3NiwwLjMwNiwwLjExNCwwLjQ2NSwwLjExNGMwLjE5OSwwLDAuMzk3LTAuMDYsMC41NjgtMC4xNzdsMjktMjANCgljMC4yNzEtMC4xODcsMC40MzItMC40OTQsMC40MzItMC44MjNTMzYuMzM4LDIwLjM2MywzNi4wNjgsMjAuMTc2eiIvPg0KPC9zdmc+DQo=" alt="play icon" data-reactid="124"/></span></div><h2 data-reactid="125">Terminology</h2><p class="mb4" data-reactid="126">Before we dive into CSS Grid concepts, let鈥檚 cover some basic terminology.</p><div class="term" data-reactid="127"><img class="term__img" alt="Grid lines" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBMaW5lPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFydGJvYXJkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTUzLjAwMDAwMCwgLTM2Ny4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIzMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMTM1IiB5PSIxMiIgd2lkdGg9IjU1IiBoZWlnaHQ9IjUzIiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTAuMDAwMDAwKSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIyIiB5PSIyIiB3aWR0aD0iNTUiIGhlaWdodD0iNTMiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjIiIHk9IjY4IiB3aWR0aD0iNTUiIGhlaWdodD0iNTMiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Ny4wMDAwMDAsIDEwLjAwMDAwMCkiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMiIgeT0iMiIgd2lkdGg9IjU1IiBoZWlnaHQ9IjUzIiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIyIiB5PSI2OCIgd2lkdGg9IjU1IiBoZWlnaHQ9IjUzIiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMzLjAwMDAwMCwgMTAuMDAwMDAwKSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIyIiB5PSIyIiB3aWR0aD0iNTUiIGhlaWdodD0iNTMiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjIiIHk9IjY4IiB3aWR0aD0iNTUiIGhlaWdodD0iNTMiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02MywwIEw2MywxNDUiIGlkPSJMaW5lIiBzdHJva2U9IiNGRjk0MDAiIHN0cm9rZS13aWR0aD0iMiIgb3BhY2l0eT0iMC42IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" data-reactid="128"/><div class="term__text" data-reactid="129"><span class="term__name" data-reactid="130">Grid lines</span><p data-reactid="131">The vertical and horizontal lines that divide the grid and separate the columns and rows.</p></div></div><div class="term" data-reactid="132"><img class="term__img" alt="Grid cell" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBDZWxsPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFydGJvYXJkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTUzLjAwMDAwMCwgLTgwNy4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDY4MS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMiIgeT0iMiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjY5IiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMTM1IiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTMiIGZpbGw9IiNGRjk0MDAiIG9wYWNpdHk9IjAuNiIgeD0iMTMzIiB5PSIwIiB3aWR0aD0iNjAiIGhlaWdodD0iNTgiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMiIgeT0iNjciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSI2OSIgeT0iNjciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NCIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMTM1IiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" data-reactid="133"/><div class="term__text" data-reactid="134"><span class="term__name" data-reactid="135">Grid cell</span><p data-reactid="136">A single unit of a CSS grid.</p></div></div><div class="term" data-reactid="137"><img class="term__img" alt="Grid area" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBBcmVhPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFydGJvYXJkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTUzLjAwMDAwMCwgLTU4MS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDQ1NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMiIgeT0iMiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjY5IiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMTM1IiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMiIgeT0iNjciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSI2OSIgeT0iNjciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NCIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMTM1IiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0zIiBmaWxsPSIjRkY5NDAwIiBvcGFjaXR5PSIwLjYiIHg9IjY3IiB5PSIwIiB3aWR0aD0iMTI2IiBoZWlnaHQ9IjEyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" data-reactid="138"/><div class="term__text" data-reactid="139"><span class="term__name" data-reactid="140">Grid area</span><p data-reactid="141">Rectangular space surrounded by four grid lines. A grid area can contain any number of grid cells.</p></div></div><div class="term" data-reactid="142"><img class="term__img" alt="Grid track" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBDb2x1bW48L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTMuMDAwMDAwLCAtMTQ4NC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAxMzU5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyIiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iNjkiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIxMzUiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyIiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjY5IiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU0IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMyIgZmlsbD0iI0ZGOTQwMCIgb3BhY2l0eT0iMC42IiB4PSI2NyIgeT0iMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjEyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIxMzUiIHk9IjY3IiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" data-reactid="143"/><div class="term__text" data-reactid="144"><span class="term__name" data-reactid="145">Grid track</span><p data-reactid="146">The space between two grid lines. This space can be horizontal or vertical</p></div></div><div class="term" data-reactid="147"><img class="term__img" alt="Grid row" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBSb3c8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTMuMDAwMDAwLCAtMTcxMC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAxNTg1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0zIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjIiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iNjkiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMTM1IiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjIiIHk9IjY3IiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjY5IiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU0IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMTM1IiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMyIgZmlsbD0iI0ZGOTQwMCIgb3BhY2l0eT0iMC42IiB4PSIwIiB5PSI2NSIgd2lkdGg9IjE5MyIgaGVpZ2h0PSI1OCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" data-reactid="148"/><div class="term__text" data-reactid="149"><span class="term__name" data-reactid="150">Grid row</span><p data-reactid="151">A horizontal track of a grid.</p></div></div><div class="term" data-reactid="152"><img class="term__img" alt="Grid column" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBDb2x1bW48L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTMuMDAwMDAwLCAtMTQ4NC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAxMzU5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyIiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iNjkiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIxMzUiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyIiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjY5IiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU0IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMyIgZmlsbD0iI0ZGOTQwMCIgb3BhY2l0eT0iMC42IiB4PSIwIiB5PSIwIiB3aWR0aD0iNjAiIGhlaWdodD0iMTIzIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjEzNSIgeT0iNjciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K" data-reactid="153"/><div class="term__text" data-reactid="154"><span class="term__name" data-reactid="155">Grid column</span><p data-reactid="156">A vertical track of a grid.</p></div></div><div class="term" data-reactid="157"><img class="term__img" alt="Gutter" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBHdXR0ZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTMuMDAwMDAwLCAtMTI1OS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAxMTMzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC00Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0zIiBmaWxsPSIjRkY5NDAwIiBvcGFjaXR5PSIwLjYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYyLjUwMDAwMCwgNjEuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC02Mi41MDAwMDAsIC02MS41MDAwMDApICIgeD0iNTgiIHk9IjAiIHdpZHRoPSI5IiBoZWlnaHQ9IjEyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMiIgeT0iMiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSI2OSIgeT0iMiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIxMzUiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iMiIgeT0iNjciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iNjkiIHk9IjY3IiB3aWR0aD0iNTYiIGhlaWdodD0iNTQiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIxMzUiIHk9IjY3IiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" data-reactid="158"/><div class="term__text" data-reactid="159"><span class="term__name" data-reactid="160">Gutter</span><p data-reactid="161">The space between rows and columns in a grid.</p></div></div><span class="term__name" data-reactid="162">Grid container</span><p data-reactid="163">The container that holds the entire CSS grid. It will be the element that has the<code data-reactid="165">display: grid</code> or <code data-reactid="167">display: inline-grid</code> property on it.</p><span class="term__name" data-reactid="169">Grid item</span><p class="mb4" data-reactid="170">Any element that is a direct child of a grid container.</p><p data-reactid="171">Got it? Let's move on to creating our first grid with CSS Grid Layout.</p></div></div></div></div><div class="bottom-nav" data-reactid="173"><div class="container" data-reactid="174"><div class="bottom-nav__item bottom-nav__item--left" data-reactid="175"></div><div class="bottom-nav__item bottom-nav__item--right" data-reactid="176"><a href="/playground/css-grid/02-first-grid/" data-reactid="177"><div class="bottom-nav__inner" data-reactid="178"><span class="bottom-nav__lead" data-reactid="179">Next</span><span class="bottom-nav__title" data-reactid="180">Your First Grid</span></div></a></div></div></div></div><div class="cta" data-reactid="181"><div class="container" data-reactid="182"><div class="cta__content" data-reactid="183"><div class="cta__logo" data-reactid="184"><img src="/playground/static/ffde-logo.0a69ffe8.png" alt="Firefox Developer Edition Logo" data-reactid="185"/></div><span class="cta__text" data-reactid="186">Get the browser with the best tools for Developers</span><div class="cta__download" data-reactid="187"><a href="https://www.mozilla.org/firefox/developer/?utm_source=moz-playground&utm_medium=referral&utm_content=bottom-cta" target="_blank" rel="noopener noreferrer" data-reactid="188"><button class="download-white" data-reactid="189"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMTEgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0xQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIxMi4wMDAwMDAsIC00Mi4wMDAwMDApIiBmaWxsPSIjMzA2RkZEIj4KICAgICAgICAgICAgPGcgaWQ9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOTMuMDAwMDAwLCAtNTgzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkxpbmtzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTgzLjAwMDAwMCwgNjEwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTEuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4zMjA0NDIsIDIwLjI0NDg1Mikgc2NhbGUoLTEsIC0xKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTE2LjMyMDQ0MiwgLTIwLjI0NDg1MikgdHJhbnNsYXRlKDEwLjgyMDQ0MiwgMTUuMjQ0ODUyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuNDYyNTM3MSw1LjYwMTg0ODQxIEMxMC43OTQ4NzY0LDUuMjU5NDA1OTYgMTAuNzkxMjg4OSw0LjcwNDA1Nzk5IDEwLjQ1ODYyMzQsNC4zNjE2MTU1NCBMNi41MDgwNTc0NCwwLjMwOTc2NzQ2OSBDNS41ODU3MjYwMywtMC42Mjk1NDExOTEgNC4yMDE5MDI3NiwwLjc3OTQyMTggNS4xMjQ1NjAzMiwxLjcxODczMDQ2IEw2Ljg0ODIyNDIzLDMuNDc0MTIxNjUgQzcuMTM0OTAzNjIsMy43NjYwNzc5MSA3LjAzOTM0MzgyLDQuMDAzNTYyMjQgNi42MzY1NTc2NSw0LjAwMzU2MjI0IEwwLjk3ODQyNzk1Miw0LjAwMzU2MjI0IEMwLjQzODAwOTU4LDQuMDAzNTYyMjQgMy41NTI3MTM2OGUtMTQsNC40NDk5NjYzNiAzLjU1MjcxMzY4ZS0xNCw1IEMzLjU1MjcxMzY4ZS0xNCw1LjU1MDAzMzY0IDAuNDM4MDA5NTgsNS45OTY0Mzc3NiAwLjk3ODQyNzk1Miw1Ljk5NjQzNzc2IEw2LjYzNjU1NzY1LDUuOTk2NDM3NzYgQzcuMDQwNjQ4MzksNS45OTY0Mzc3NiA3LjEzNzE4NjYyLDYuMjMyNTkzNTEgNi44NDgyMjQyMyw2LjUyNzIwNjk0IEw1LjEyNDU2MDMyLDguMjgxMjY5NTQgQzQuMjAxOTAyNzYsOS4yMjA1NzgyIDUuNTg1NzI2MDMsMTAuNjI5NTQxMiA2LjUwODA1NzQ0LDkuNjkwMjMyNTMgTDEwLjQ2MjUzNzEsNS42MDE4NDg0MSBaIiBpZD0iUGFnZS0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjM1NDk4MiwgNS4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTUuMzU0OTgyLCAtNS4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" alt="download arrow" data-reactid="190"/>Firefox Developer Edition</button></a></div></div></div></div><footer class="footer" data-reactid="192"><div class="container" data-reactid="193"><div class="row" data-reactid="194"><div class="col-md-4" data-reactid="195"><img class="footer__logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzguNSAxODUuNSI+CiAgPHN0eWxlPgogICAgLnN0MHtmaWxsOiNGRkZGRkY7fQogIDwvc3R5bGU+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTUwMy41IDExNy4yYzAgNC45IDIuNCA4LjggOSA4LjggNy44IDAgMTYuMS01LjYgMTYuNi0xOC4zLTMuNi0uNi03LjMtLjktMTEtMS03LjggMC0xNC42IDIuMi0xNC42IDEwLjV6Ii8+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTAgMHYxODUuNWg1NzguNVYwSDB6bTE2My44IDEzOS45aC0zMnYtNDNjMC0xMy4yLTQuNC0xOC4zLTEzLjEtMTguMy0xMC41IDAtMTQuOCA3LjUtMTQuOCAxOC4xdjI2LjZIMTE0VjE0MEg4MlY5Ni45YzAtMTMuMi00LjQtMTguMy0xMy4xLTE4LjMtMTAuNSAwLTE0LjggNy41LTE0LjggMTguMXYyNi42aDE0LjVWMTQwSDIyLjJ2LTE2LjZoMTAuMlY4MC4xaC0xMVY2My41aDMyLjlWNzVjNC42LTguMSAxMi41LTEzIDIzLjItMTMgMTEgMCAyMS4yIDUuMyAyNC45IDE2LjUgNC4yLTEwLjIgMTIuOS0xNi41IDI0LjktMTYuNSAxMy43IDAgMjYuMyA4LjMgMjYuMyAyNi41djM0LjloMTAuMnYxNi41em00OC42IDEuN2MtMjMuNiAwLTM5LjgtMTQuNC0zOS44LTM4LjggMC0yMi40IDEzLjYtNDAuOSA0MS00MC45czQwLjkgMTguNSA0MC45IDM5LjhjMCAyNC41LTE3LjcgMzkuOS00Mi4xIDM5Ljl6bTEyMS43LTEuN2gtNjYuOGwtMi4yLTExLjUgNDItNDguM2gtMjMuOUwyNzkuOCA5MiAyNjQgOTAuM2wyLjctMjYuOEgzMzRsMS43IDExLjUtNDIuNCA0OC4zSDMxOGwzLjYtMTEuOSAxNy4zIDEuNy00LjggMjYuOHptNDEuNCAwaC0yMi45di0yNy41aDIyLjl2MjcuNXptMC00OWgtMjIuOVY2My41aDIyLjl2MjcuNHptMTIgNDlsMzMuMS0xMTYuNmgyMS41TDQwOSAxMzkuOWgtMjEuNXptNDQuNCAwTDQ2NSAyMy4zaDIxLjVsLTMzIDExNi42aC0yMS42em0xMTMuOSAxLjdjLTEwLjIgMC0xNS44LTUuOS0xNi44LTE1LjMtNC40IDcuOC0xMi4yIDE1LjMtMjQuNiAxNS4zLTExIDAtMjMuNi01LjktMjMuNi0yMS45IDAtMTguOCAxOC4xLTIzLjIgMzUuNi0yMy4yIDQuMiAwIDguNC4yIDEyLjUuN3YtMi41YzAtNy44LS4yLTE3LjEtMTIuNS0xNy4xLTQuNiAwLTguMS4zLTExLjcgMi4yTDUwMiA5MC42bC0xNy41LTEuOSAzLjQtMTkuOGMxMy40LTUuNCAyMC4yLTcgMzIuNy03IDE2LjUgMCAzMC4zIDguNSAzMC4zIDI1LjlWMTIxYzAgNC40IDEuNyA1LjkgNS4zIDUuOSAxLjEgMCAyLjItLjIgMy4yLS41bC4yIDExLjVjLTQuMiAyLjQtOC45IDMuNy0xMy44IDMuN3oiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjEzLjMgNzguN2MtMTEuMiAwLTE4LjEgOC4zLTE4LjEgMjIuNyAwIDEzLjIgNi4xIDIzLjQgMTggMjMuNCAxMS40IDAgMTguOC05LjIgMTguOC0yMy43LS4xLTE1LjQtOC40LTIyLjQtMTguNy0yMi40eiIvPgo8L3N2Zz4K" alt="Mozilla Logo" data-reactid="196"/></div><div class="col-md-4" data-reactid="197"><span class="footer__header" data-reactid="198">Community & Resources</span><ul class="footer__list" data-reactid="199"><li data-reactid="200"><a href="http://github.com/mozilladevelopers/playground/" rel="noopener noreferrer" target="_blank" data-reactid="201">Contribute on Github</a></li><li data-reactid="202"><a href="https://twitter.com/FirefoxDevTools" rel="noopener noreferrer" target="_blank" data-reactid="203">Firefox DevTools Twitter</a></li><li data-reactid="204"><a href="https://devtools-html-slack.herokuapp.com/" rel="noopener noreferrer" target="_blank" data-reactid="205">Firefox DevTools Slack Channel</a></li><li data-reactid="206"><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout" rel="noopener noreferrer" target="_blank" data-reactid="207">MDN</a></li></ul></div><div class="col-md-4" data-reactid="208"><span class="footer__header" data-reactid="209">Mozilla</span><ul class="footer__list" data-reactid="210"><li data-reactid="211"><a href="https://www.mozilla.org/about/" rel="noopener noreferrer" target="_blank" data-reactid="212">About</a></li><li data-reactid="213"><a href="https://www.mozilla.org/contact/" rel="noopener noreferrer" target="_blank" data-reactid="214">Contact Us</a></li><li data-reactid="215"><a href="https://donate.mozilla.org/?presets=100,50,25,15&amount=50" rel="noopener noreferrer" target="_blank" data-reactid="216">Donate</a></li></ul></div></div><hr class="footer__div" data-reactid="217"/><ul class="footer__legal" data-reactid="218"><li data-reactid="219"><a href="https://www.mozilla.org/privacy/" rel="noopener noreferrer" target="_blank" data-reactid="220">Privacy</a></li><li data-reactid="221"><a href="https://www.mozilla.org/privacy/websites/#cookies" rel="noopener noreferrer" target="_blank" data-reactid="222">Cookies</a></li><li data-reactid="223"><a href="https://www.mozilla.org/legal/" rel="noopener noreferrer" target="_blank" data-reactid="224">Legal</a></li></ul></div></footer></div></div><script id="webpack-manifest">/*<![CDATA[*/window.webpackManifest={"231608221292675":"app-8f1ccff5c7a42d45471a.js","37651121599412":"component---src-pages-02-first-grid-js-566332769f76156521e4.js","166692331054057":"component---src-pages-03-firefox-devtools-js-4d49d9fbe949f44c051f.js","94085081834145":"component---src-pages-04-fr-unit-js-48d7c38e90190513a02c.js","47944494456262":"component---src-pages-05-mixing-units-js-5d3d758d0a830ea83032.js","55616705441138":"component---src-pages-06-position-items-js-fb920db7e7ddc66df489.js","48774483122690":"component---src-pages-07-basic-layout-js-2b4af9229644eb459218.js","210113615180907":"component---src-pages-08-template-areas-js-86417ed2a38587f32a93.js","26549370073863":"component---src-pages-09-named-lines-js-b5e6d21268d5a7c59914.js","9384344114300":"component---src-pages-10-learn-more-js-abc969c8b5d8e9f33383.js","162898551421021":"component---src-pages-404-js-e32ee3bf13f415e6dd85.js","35783957827783":"component---src-pages-index-js-60ad6e49edd1f1f74531.js","234804948918196":"component---src-pages-css-grid-02-first-grid-js-662a4d70bdacbc5f5c74.js","270958380025928":"component---src-pages-css-grid-03-firefox-devtools-js-7889d2c46194053d051a.js","245946605849590":"component---src-pages-css-grid-04-fr-unit-js-73d7304e90a1b1d31f0a.js","22364465788215":"component---src-pages-css-grid-05-mixing-units-js-eb1a7d094b5868ef6804.js","177315466596493":"component---src-pages-css-grid-06-position-items-js-7c4ffa3b057a0461bcb0.js","259628375151980":"component---src-pages-css-grid-07-basic-layout-js-5ffa2b65140c7d08f30e.js","226360589622867":"component---src-pages-css-grid-08-template-areas-js-49e7225dfaf73c47cc1d.js","81692003008797":"component---src-pages-css-grid-09-named-lines-js-e14a834fd64e2bae44bf.js","139762318773600":"component---src-pages-css-grid-10-learn-more-js-1a7925459470d1374a60.js","216809853818397":"component---src-pages-css-grid-index-js-7b07f5d7da5ab790f682.js","270304712061374":"component---src-pages-debugger-02-check-variable-values-js-f149857a96fcc3ce701d.js","200910591484115":"component---src-pages-debugger-03-the-call-stack-js-b4372b69ff564251592e.js","122775117748054":"component---src-pages-debugger-04-conditional-breakpoints-js-8b43fbb01271069acc46.js","124780248285625":"component---src-pages-debugger-05-learn-more-js-61e1d0fa9b92affeaed0.js","136876265974512":"component---src-pages-debugger-index-js-2597034f63dbd6422306.js","60335399758886":"path----557518bd178906f8d58a.js","170993395202698":"path---02-first-grid-a0e39f21c11f6a62c5ab.js","202528526510917":"path---03-firefox-devtools-a0e39f21c11f6a62c5ab.js","21645017057402":"path---04-fr-unit-a0e39f21c11f6a62c5ab.js","276602257718623":"path---05-mixing-units-a0e39f21c11f6a62c5ab.js","97985317976918":"path---06-position-items-a0e39f21c11f6a62c5ab.js","180086047290608":"path---07-basic-layout-a0e39f21c11f6a62c5ab.js","264468362835422":"path---08-template-areas-a0e39f21c11f6a62c5ab.js","221033611934924":"path---09-named-lines-a0e39f21c11f6a62c5ab.js","227726641203895":"path---10-learn-more-a0e39f21c11f6a62c5ab.js","254022195166212":"path---404-a0e39f21c11f6a62c5ab.js","142629428675168":"path---index-a0e39f21c11f6a62c5ab.js","178698757827068":"path---404-html-a0e39f21c11f6a62c5ab.js","123764462342234":"path---css-grid-02-first-grid-a0e39f21c11f6a62c5ab.js","207193594877290":"path---css-grid-03-firefox-devtools-a0e39f21c11f6a62c5ab.js","168672186756039":"path---css-grid-04-fr-unit-a0e39f21c11f6a62c5ab.js","51150815026611":"path---css-grid-05-mixing-units-a0e39f21c11f6a62c5ab.js","192704384712088":"path---css-grid-06-position-items-a0e39f21c11f6a62c5ab.js","7403850988108":"path---css-grid-07-basic-layout-a0e39f21c11f6a62c5ab.js","14025342602699":"path---css-grid-08-template-areas-a0e39f21c11f6a62c5ab.js","206353735991246":"path---css-grid-09-named-lines-a0e39f21c11f6a62c5ab.js","138380857046173":"path---css-grid-10-learn-more-a0e39f21c11f6a62c5ab.js","63463904736412":"path---css-grid-a0e39f21c11f6a62c5ab.js","175301269952765":"path---debugger-02-check-variable-values-a0e39f21c11f6a62c5ab.js","180248409626559":"path---debugger-03-the-call-stack-a0e39f21c11f6a62c5ab.js","200871159611423":"path---debugger-04-conditional-breakpoints-a0e39f21c11f6a62c5ab.js","148027752897441":"path---debugger-05-learn-more-a0e39f21c11f6a62c5ab.js","106222096641952":"path---debugger-a0e39f21c11f6a62c5ab.js","114276838955818":"component---src-layouts-index-js-745ea9f5fcaee4546906.js"}/*]]>*/</script><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-35433268-86', 'auto'); </script><script>/*<![CDATA[*/!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",["/playground/commons-801253a49cbae9e30f44.js","/playground/app-8f1ccff5c7a42d45471a.js","/playground/path---css-grid-a0e39f21c11f6a62c5ab.js","/playground/component---src-pages-css-grid-index-js-7b07f5d7da5ab790f682.js","/playground/component---src-layouts-index-js-745ea9f5fcaee4546906.js"])/*]]>*/</script></body></html>