1<!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"/><style data-href="/styles.453bc106c19a40ab48d2.css">/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:inherit}dfn{font-style:italic}mark{background-color:#ff0;color:#000}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54} 2 3/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
3@font-face{font-family:Fira Code;src:url(/shared/fonts/FiraCode-VF.ttf);font-weight:500;font-style:normal}@font-face{font-family:Inter;src:url(/shared/fonts/Inter-VariableFont.ttf);font-weight:400;font-style:normal}:root{background:#0f0f14;font-size:1.25rem;line-height:1.618;color:#2e2e32}body *{box-sizing:border-box}body{font-family:Inter,sans-serif}a{color:#90319b;font-variation-settings:"wght" 375}h2 a,h3 a{color:inherit}h2 a,h3 a,p a{text-decoration:none}p a{border-bottom:2px solid #90319b;font-variation-settings:"wght" 350}code{font-family:Fira Code,sans-serif;color:#00a4c3}p,span.bullet{font-weight:400;font-variation-settings:"wght" 280;font-size:.95rem;line-height:1.7rem}p{margin:1em 0}ul{font-weight:400;font-variation-settings:"wght" 280;font-size:.95rem}em{font-variation-settings:"wght" 280,"ital" 1}strong{font-variation-settings:"wght" 600}code{font-size:.95rem}img,video{max-width:100%}h1,h2,h3,h4,h5,h6{font-family:Inter,sans-serif;letter-spacing:.075rem}h1{font-size:1.65rem;margin-top:0;margin-bottom:1rem;font-variation-settings:"wght" 600}h2{font-size:1.1rem;line-height:1.35;margin-top:2rem}h2 a{font-variation-settings:"wght" 600}h3{font-size:.9rem;margin-bottom:.8rem}h2+p{margin-top:.5em}h3+p{margin-top:0}ul{list-style-type:square;padding:0 1em .18em;margin:0 0 .6em}li{position:relative;margin:.6em 0}li:first-of-type{margin-top:0}blockquote{border-left:5px solid #a7e040;font-style:italic;color:rgba(0,0,0,.6);padding-left:1rem;margin-left:1rem}blockquote p{margin:0}.site{background:#fff}.container{padding:0 1em;max-width:50ch}.ace_editor{padding-bottom:0}.ace_editor,.embed-example{border-radius:1px}.ace_scrollbar{height:100%!important}.ace_scroller{top:10px!important}.ace_editor{font-size:.75rem!important}.ace_text-input{pointer-events:none}.ace_editor .highlightline{position:absolute;background-color:#72c3b3!important}@media (min-width:600px){.ace_editor{font-size:.85rem!important}}@media (min-width:1220px){:root{font-size:1.35rem}}@media (min-width:1500px){:root{font-size:1.45rem}}@media (min-width:1820px){:root{font-size:1.65rem}}::-webkit-scrollbar{-webkit-appearance:none;width:9px;border-radius:4px;background:none}::-webkit-scrollbar-thumb{border:none;border-radius:4px;background-color:#483768}</style><meta name="generator" content="Gatsby 2.25.3"/><title data-react-helmet="true">Article Layout with CSS Grid</title><link data-react-helmet="true" rel="icon" href="/favicon.ico?v=2.3"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"/><meta data-react-helmet="true" name="description" content="How to easily build sharp blog post layouts with CSS Grid"/><meta data-react-helmet="true" property="og:image" content="https://mastery.games/img/article-grid-layout.jpg"/><meta data-react-helmet="true" property="og:image:type" content="image/jpg"/><meta data-react-helmet="true" property="og:image:width" content="2600"/><meta data-react-helmet="true" property="og:title" content="Article Layout with CSS Grid"/><meta data-react-helmet="true" property="og:description" content="How to easily build sharp blog post layouts with CSS Grid"/><meta data-react-helmet="true" property="og:url" content="https://mastery.games"/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:site" content="@geddski"/><meta data-react-helmet="true" name="twitter:creator" content="@geddski"/><link rel="preconnect" href="https://www.google-analytics.com"/><link rel="dns-prefetch" href="https://www.google-analytics.com"/>
3<script> 4 5 6 if(true) { 7 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 8 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 9 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 10 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 11 } 12 if (typeof ga === "function") { 13 ga('create', 'UA-85301719-1', 'auto', {}); 14 15 16 17 18 19 }</script>
19<link as="script" rel="preload" href="/webpack-runtime-ed42cc051f8f122e4270.js"/><link as="script" rel="preload" href="/framework-20469c3b8702cb7a345d.js"/><link as="script" rel="preload" href="/styles-468f6f31173e37a60e9a.js"/><link as="script" rel="preload" href="/74375b67-761e73b1fdcf6e43136a.js"/><link as="script" rel="preload" href="/edac63d6-f9ee27a8187daf001162.js"/><link as="script" rel="preload" href="/880a94f0-983b533469e5b1a2d854.js"/><link as="script" rel="preload" href="/fba43109-93aa8ade80b8913df88f.js"/><link as="script" rel="preload" href="/0b2db5e9-b542a77d2c9a3c7fc729.js"/><link as="script" rel="preload" href="/c4fa3097-a9bdec3b1ea18429d7e2.js"/><link as="script" rel="preload" href="/app-2b888dd579ec2c43d988.js"/><link as="script" rel="preload" href="/component---src-post-article-grid-layout-mdx-39180f4cbfd17c47eff0.js"/><link as="fetch" rel="preload" href="/page-data/post/article-grid-layout/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/3159585216.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/3159585216.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="site"><style data-emotion-css="1ric81x">.css-1ric81x{background:#232327;color:#ffffff;height:80px;}</style><div class="css-1ric81x"><style data-emotion-css="180tv2w">.css-180tv2w{position:fixed;top:0;bottom:0;}</style><div class="css-180tv2w"><style data-emotion-css="1j8gfss">.css-1j8gfss{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);position:absolute;background:#232327;top:0;bottom:0;left:-20px;padding:24px;width:354px;border-left:20px solid #232327;box-shadow:none;overflow:auto;}</style><div class="css-1j8gfss"><style data-emotion-css="4t8dlh-Pane--Header">.css-4t8dlh-Pane--Header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;}</style><div class="css-4t8dlh-Pane--Header e1vh67jq1"><style data-emotion-css="9atchh-Pane--Controls">.css-9atchh-Pane--Controls{position:absolute;left:24px;}</style><div class="css-9atchh-Pane--Controls e1vh67jq2"><style data-emotion-css="12lp09h-CloseButton--Close">.css-12lp09h-CloseButton--Close{color:#fff;border:none;display:grid;grid-auto-flow:column;grid-column-gap:5px;cursor:pointer;}</style><a class="css-12lp09h-CloseButton--Close e6du46h0"><div class="css-w1pai9-CloseButton--Icon e6du46h1"><img alt="close" src="/shared/icons/close.svg"/></div><style data-emotion-css="seak01-Tip--Container">.css-seak01-Tip--Container{color:#ffffff;font-size:14px;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:0.8s;transition-duration:0.8s;-webkit-transition-delay:0s;transition-delay:0s;opacity:0;}</style><div color="#d0cfd1" class="css-seak01-Tip--Container e1k1pdhx0"><div>(escape)</div></div></a></div><style data-emotion-css="9mk1ad-Pane--Title">.css-9mk1ad-Pane--Title{text-transform:uppercase;font-size:16px;}</style><div class="css-9mk1ad-Pane--Title e1vh67jq3">Mastery Games</div></div></div></div><style data-emotion-css="zzebi1">.css-zzebi1{display:inline-grid;padding-left:10px;padding-right:10px;grid-column-gap:10px;height:80px;grid-template-columns:60px 150px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;cursor:pointer;}.css-zzebi1:hover{background-color:#483768;}</style><span class="css-zzebi1"><style data-emotion-css="uwwqev">.css-uwwqev{width:100%;height:100%;}</style><div class="css-uwwqev"><svg width="100%" height="100%" viewBox="0 0 163 163" fill="none"><path d="M39.8112 63.6343L60.4997 42.9458C61.8163 41.6292 62.4747 40.9708 62.7213 40.2117C62.9383 39.5439 62.9383 38.8246 62.7213 38.1569C62.4747 37.3978 61.8163 36.7394 60.4997 35.4228L57.0516 31.9747C55.7349 30.658 55.0766 29.9997 54.3174 29.753C53.6497 29.5361 52.9304 29.5361 52.2626 29.753C51.5035 29.9997 50.8452 30.658 49.5285 31.9747L17.8689 63.6343C16.5522 64.951 15.8939 65.6093 15.6472 66.3685C15.4302 67.0362 15.4302 67.7555 15.6472 68.4233C15.8939 69.1824 16.5522 69.8407 17.8689 71.1574L49.5285 102.817C50.8452 104.134 51.5035 104.792 52.2626 105.039C52.9304 105.256 53.6497 105.256 54.3174 105.039C55.0766 104.792 55.7349 104.134 57.0516 102.817L60.4997 99.369C61.8163 98.0523 62.4747 97.394 62.7213 96.6348C62.9383 95.9671 62.9383 95.2478 62.7213 94.58C62.4747 93.8209 61.8163 93.1625 60.4997 91.8459L39.8112 71.1574C38.4945 69.8407 37.8362 69.1824 37.5895 68.4233C37.3726 67.7555 37.3726 67.0362 37.5895 66.3685C37.8362 65.6093 38.4945 64.951 39.8112 63.6343Z" fill="white"></path><path d="M102.504 35.4225L105.952 31.9744C107.269 30.6577 107.927 29.9994 108.686 29.7527C109.354 29.5358 110.073 29.5358 110.741 29.7527C111.5 29.9994 112.158 30.6577 113.475 31.9744L145.135 63.634C146.451 64.9507 147.11 65.609 147.356 66.3681C147.573 67.0359 147.573 67.7552 147.356 68.4229C147.11 69.1821 146.451 69.8404 145.135 71.1571L113.475 102.817C112.158 104.133 111.5 104.792 110.741 105.038C110.073 105.255 109.354 105.255 108.686 105.038C107.927 104.792 107.268 104.133 105.952 102.817L102.504 99.3687C101.187 98.052 100.529 97.3937 100.282 96.6345C100.065 95.9668 100.065 95.2475 100.282 94.5797C100.529 93.8206 101.187 93.1622 102.504 91.8456L123.192 71.1571C124.509 69.8404 125.167 69.1821 125.414 68.423C125.631 67.7552 125.631 67.0359 125.414 66.3681C125.167 65.609 124.509 64.9507 123.192 63.634L102.504 42.9455C101.187 41.6289 100.529 40.9705 100.282 40.2114C100.065 39.5436 100.065 38.8243 100.282 38.1566C100.529 37.3974 101.187 36.7391 102.504 35.4225Z" fill="white"></path><path d="M74.6052 105.952L71.1571 102.504C69.8405 101.187 69.1821 100.529 68.423 100.282C67.7552 100.065 67.0359 100.065 66.3682 100.282C65.6091 100.529 64.9507 101.187 63.6341 102.504L57.0517 109.086C55.7349 110.403 55.0765 111.061 54.3173 111.308C53.6495 111.525 52.9302 111.525 52.2624 111.308C51.5033 111.061 50.8449 110.403 49.5283 109.086L14.7364 74.288C13.4198 72.9712 12.7614 72.3127 12.0023 72.066C11.3345 71.849 10.6151 71.849 9.94734 72.0659C9.18816 72.3126 8.52978 72.971 7.21301 74.2877L3.76448 77.7363C2.44788 79.0529 1.78958 79.7112 1.54292 80.4703C1.32595 81.138 1.32593 81.8573 1.54286 82.525C1.78949 83.2841 2.44775 83.9425 3.76428 85.2591L49.5283 131.028C50.845 132.345 51.5033 133.003 52.2624 133.25C52.9302 133.467 53.6495 133.467 54.3173 133.25C55.0765 133.004 55.7349 132.345 57.0516 131.028L74.6052 113.475C75.9219 112.158 76.5802 111.5 76.8269 110.741C77.0439 110.073 77.0439 109.354 76.8269 108.686C76.5802 107.927 75.9219 107.268 74.6052 105.952Z" fill="#BCB9C5"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M79.1479 30.564L44.6671 65.0448C43.3687 66.3432 43.3687 68.4483 44.6671 69.7468L107.359 132.439C108.658 133.737 110.763 133.737 112.061 132.439L160.647 83.8485C161.945 82.55 161.945 80.445 160.647 79.1467L154.377 72.8769C153.078 71.5785 150.973 71.5785 149.675 72.8771L112.061 110.496C110.763 111.795 108.658 111.795 107.359 110.497L94.821 97.9583C93.5226 96.6599 93.5226 94.5548 94.821 93.2564L118.331 69.7467C119.629 68.4483 119.629 66.3432 118.331 65.0448L83.8498 30.564C82.5514 29.2656 8
190.4463 29.2656 79.1479 30.564ZM86.9808 58.7803C82.22 63.5412 82.22 71.2599 86.9808 76.0207C91.7416 80.7815 99.4604 80.7815 104.221 76.0207C108.982 71.2599 108.982 63.5411 104.221 58.7803C99.4604 54.0195 91.7416 54.0195 86.9808 58.7803Z" fill="#BCB9C5"></path><path d="M101.086 72.8856C98.0566 75.9152 93.1446 75.9152 90.115 72.8856C87.0854 69.856 87.0854 64.9441 90.115 61.9145C93.1446 58.8849 98.0566 58.8849 101.086 61.9145C104.116 64.9441 104.116 69.856 101.086 72.8856Z" fill="white"></path></svg></div><div class="css-0"><svg width="100%" height="100%" viewBox="0 0 303 48" fill="none"><path d="M168.24 43.24C166.539 44.941 163.781 44.941 162.08 43.24C160.379 41.539 160.379 38.781 162.08 37.08C163.781 35.379 166.539 35.379 168.24 37.08C169.941 38.781 169.941 41.539 168.24 43.24Z" fill="white"></path><path d="M2.41477 39H8.46591V25.9034C8.46591 23.4886 10 21.8835 12.017 21.8835C14.0057 21.8835 15.3409 23.2472 15.3409 25.392V39H21.2074V25.6761C21.2074 23.4176 22.5 21.8835 24.7017 21.8835C26.6335 21.8835 28.0824 23.0909 28.0824 25.5199V39H34.1193V24.3267C34.1193 19.5966 31.3068 16.8977 27.2443 16.8977C24.0483 16.8977 21.5625 18.5312 20.6676 21.0312H20.4403C19.7443 18.5028 17.5142 16.8977 14.517 16.8977C11.5767 16.8977 9.34659 18.4602 8.4375 21.0312H8.18182V17.1818H2.41477V39ZM45.1207 39.4119C48.3452 39.4119 50.4332 38.0057 51.4986 35.9744H51.669V39H57.4077V24.2841C57.4077 19.0852 53.0043 16.8977 48.1463 16.8977C42.919 16.8977 39.4815 19.3977 38.6435 23.375L44.2401 23.8295C44.652 22.3807 45.9446 21.3153 48.1179 21.3153C50.1776 21.3153 51.3565 22.3523 51.3565 24.142V24.2273C51.3565 25.6335 49.8651 25.8182 46.0724 26.1875C41.7543 26.5852 37.8764 28.0341 37.8764 32.9062C37.8764 37.2244 40.9588 39.4119 45.1207 39.4119ZM46.8537 35.2358C44.9929 35.2358 43.6577 34.3693 43.6577 32.7074C43.6577 31.0028 45.0639 30.1648 47.1946 29.8665C48.5156 29.6818 50.6747 29.3693 51.3991 28.8864V31.2017C51.3991 33.4886 49.5099 35.2358 46.8537 35.2358ZM80.2557 23.4034C79.7159 19.3835 76.4773 16.8977 70.9659 16.8977C65.3835 16.8977 61.7045 19.483 61.7188 23.6875C61.7045 26.9545 63.7642 29.071 68.0256 29.9233L71.804 30.6761C73.7074 31.0597 74.5739 31.7557 74.6023 32.8494C74.5739 34.142 73.1676 35.0653 71.0511 35.0653C68.892 35.0653 67.4574 34.142 67.0881 32.3665L61.1364 32.679C61.7045 36.8551 65.2557 39.4261 71.0369 39.4261C76.6903 39.4261 80.7386 36.5426 80.7528 32.2386C80.7386 29.0852 78.679 27.196 74.446 26.3295L70.4972 25.5341C68.4659 25.0938 67.7131 24.3977 67.7273 23.3466C67.7131 22.0398 69.1903 21.1875 71.0653 21.1875C73.1676 21.1875 74.4176 22.3381 74.7159 23.7443L80.2557 23.4034ZM96.1683 17.1818H92.0632V11.9545H86.0121V17.1818H83.0291V21.7273H86.0121V33.0909C85.9837 37.3665 88.8956 39.483 93.2848 39.2983C94.8473 39.2415 95.9553 38.929 96.5661 38.7301L95.6143 34.2273C95.3161 34.2841 94.6768 34.4261 94.1087 34.4261C92.9013 34.4261 92.0632 33.9716 92.0632 32.2955V21.7273H96.1683V17.1818ZM109.819 39.4261C115.217 39.4261 118.853 36.7983 119.705 32.75L114.109 32.3807C113.498 34.0426 111.935 34.9091 109.918 34.9091C106.893 34.9091 104.975 32.9062 104.975 29.6534V29.6392H119.833V27.9773C119.833 20.5625 115.344 16.8977 109.577 16.8977C103.157 16.8977 98.995 21.4574 98.995 28.1903C98.995 35.108 103.1 39.4261 109.819 39.4261ZM104.975 25.8892C105.103 23.4034 106.992 21.4148 109.677 21.4148C112.305 21.4148 114.123 23.2898 114.137 25.8892H104.975ZM123.782 39H129.833V26.6562C129.833 23.9716 131.793 22.125 134.464 22.125C135.302 22.125 136.452 22.267 137.021 22.4517V17.0824C136.481 16.9545 135.728 16.8693 135.117 16.8693C132.674 16.8693 130.671 18.2898 129.876 20.9886H129.648V17.1818H123.782V39ZM144.549 47.1392C149.052 47.1392 151.452 44.8523 152.674 41.358L161.154 17.2102L154.748 17.1818L150.188 33.2045H149.961L145.444 17.1818H139.08L146.907 39.625L146.552 40.5483C145.7 42.5227 144.237 42.6648 142.106 41.9972L140.742 46.5284C141.609 46.8835 143.015 47.1392 144.549 47.1392Z" fill="white"></path><path d="M183.244 47.4943C189.48 47.4943 193.912 44.6534 193.912 39.2131V17.1818H187.903V20.8466H187.676C186.866 19.071 185.091 16.8977 181.44 16.8977C176.653 16.8977 172.605 20.6193 172.605 28.0483C172.605 35.3068 176.54 38.6875 181.455 38.6875C184.935 38.6875 186.881 36.9403 187.676 35.1364H187.932V39.1278C187.932 41.983 186.014 43.1477 183.386 43.1477C180.716 43.1477 179.366 41.983 178.869 40.804L173.273 41.5568C173.997 44.8523 177.364 47.4943 183.244 47.4943ZM183.372 34.142C180.403 34.142 178.784 31.7841 178.784 28.0199C178.784 24.3125 180.375 21.7131 183.372 21.7131C186.312 21.7131 187.96 24.1989 187.96 28.0199C187.96 31.8693 186.284 34.142 183.372 34.142ZM204.949 39.4119C208.173 39.4119 210.261 38.0057 211.327 35.9744H211.497V39H217.236V24.2841C217.236 19.0852 212.832 16.8977 207.974 16.8977C202.747 16.8977 199.31 19.3977 198.472 23.375L204.068 23.8295C204.48 22.3807 205.773 21.3153 207.946 21.3153C210.006 21.3153 211.185 22.3523 211.185 24.142V24.2273C211.185 25.6335 209.693 25.8182 205.901 26.1875C201.582 26.5852 197.705 28.0341 197.705 32.9062C197.705 37.2244 200.787 39.4119 204.949 39.4119ZM206.682 35.2358C204.821 35.2358 203.486 34.3693 203.486 32.7074C203.486 31.0028 204.892 30.1648 207.023 29.8665C208.344 29.6818 210.503 29.3693 211.227 28.8864V31.2017C211.227 33.4886 209.338 35.2358 206.682 35.2358ZM221.93 39H227.982V25.9034C227.982 23.4886 229.516 21.8835 231.533 21.8835C233.521 21.8835 234.857 23.2472 234.857 25.392V39H240.723V25.6761C240.723 23.4176 242.016 21.8835 244.217 21.8835C246.149 21.8835 247.598 23.0909 247.598 25.5199V39H253.635V24.3267C253.635 19.5966 250.822 16.8977 246.76 16.8977C243.564 16.8977 241.078 18.5312 240.183 21.0312H239.956C239.26 18.5028 237.03 16.8977 234.033 16.8977C231.092 16.8977 228.862 18.4602 227.953 21.0312H227.697V17.1818H221.93V39ZM268.358 39.4261C273.756 39.4261 277.392 36.7983 278.244 32.75L272.648 32.3807C272.037 34.0426 270.474 34.9091 268.457 34.9091C265.432 34.9091 263.514 32.9062 263.514 29.6534V29.6392H278.372V27.9773C278.372 20.5625 273.884 16.8977 268.116 16.8977C261.696 16.8977 257.534 21.4574 257.534 28.1903C257.534 35.108 261.639 39.4261 268.358 39.4261ZM263.514 25.8892C263.642 23.4034 265.531 21.4148 268.216 21.4148C270.844 21.4148 272.662 23.2898 272.676 25.8892H263.514ZM300.474 23.4034C299.935 19.3835 296.696 16.8977 291.185 16.8977C285.602 16.8977 281.923 19.483 281.938 23.6875C281.923 26.9545 283.983 29.071 288.244 29.9233L292.023 30.6761C293.926 31.0597 294.793 31.7557 294.821 32.8494C294.793 34.142 293.386 35.0653 291.27 35.0653C289.111 35.0653 287.676 34.142 287.307 32.3665L281.355 32.679C281.923 36.8551 285.474 39.4261 291.256 39.4261C296.909 39.4261 300.957 36.5426 300.972 32.2386C300.957 29.0852 298.898 27.196 294.665 26.3295L290.716 25.5341C288.685 25.0938 287.932 24.3977 287.946 23.3466C287.932 22.0398 289.409 21.1875 291.284 21.1875C293.386 21.1875 294.636 22.3381 294.935 23.7443L300.474 23.4034Z" fill="#BCB9C4"></path></svg></div></span></div><style data-emotion-css="1pjt6tp-blog-post--Post">.css-1pjt6tp-blog-post--Post{color:#2e2e32;padding-top:2rem;display:grid;grid-template-columns:minmax(1.2rem,1fr) minmax(auto,57ch) minmax( 1.2rem, 1fr );}.css-1pjt6tp-blog-post--Post > *{grid-column:2;}.css-1pjt6tp-blog-post--Post h2{margin-top:2rem;}</style><div class="css-1pjt6tp-blog-post--Post e1ymhsje0"><style data-emotion-css="1pjuyqb">.css-1pjuyqb{grid-column:1 / 4 !important;justify-self:center;max-width:calc(100% - 1.2rem);margin:1.2rem;margin-bottom:2.5rem;}@media (min-width:1220px){.css-1pjuyqb{max-width:110ch;max-height:65vh;}}</style><img src="/img/article-grid-layout.jpg" alt="" class="css-1pjuyqb"/><h1>Article Layout with CSS Grid</h1><p>Yesterday I shipped my brand new <a href="https://gedd.ski">gedd.ski</a> site. This new version is built with my <em>dream</em> stack and I'll write up a post on that soon (spoiler: <a href="https://gatsbyjs.org">Gatsby</a> and <a href="https://mdxjs.com/">MDX</a> are game-changers).</p><p>For the blog post page (the page you're looking at right now) I wanted a mobile-friendly layout where the text was centered and readable, where the images/code examples are wide. Similar to the layout on Medium.com (minus the desperate popups begging people to sign up & pay).</p><p>I discovered a pretty exciting & simple way to accomplish this layout with CSS Grid. Check it out!</p><style data-emotion-css="1j3xrpn">.css-1j3xrpn{margin:1em 1.2rem;max-width:100ch;grid-column:1 / 4 !important;justify-self:center;}</style><div class="css-1j3xrpn"><img src="/gif/responsive-new-site.gif" alt="responsive new site layout with css grid"/></div><p>Ready to have your mind blown? Look how easy grid makes this:</p><pre><code class="language-css">.post { 20 display: grid; 21 grid-template-columns: 22 minmax(1.2rem, 1fr) 23 minmax(auto, 57ch) 24 minmax(1.2rem, 1fr); 25} 26</code></pre><p>This code creates three flexible grid columns.</p><p>The outer columns use <code>minmax(1.2rem, 1fr)</code>. This makes these columns a <em>minimum</em> width of <code>1.2rem</code> and a <em>maxiumum</em> width of <code>1fr</code>.</p><p>The inner column for text uses <code>minmax(auto, 57ch)</code>. The minimum size of <code>auto</code> makes the column size to the width of the text as it wraps â so it looks great on tiny screens. The maximum size of <code>57ch</code> makes sure that column never gets bigger than 57 characters, keeping the text from getting too wide and unreadable on huge screens.</p><p>Here's a live example you can play with!</p><style data-emotion-css="z01v4j-CodeExample--CodeExample">.css-z01v4j-CodeExample--CodeExample{display:grid;border:1px solid #e5e5e5;border-radius:1px;grid-column:1 / 4 !important;position:relative;justify-self:center;width:100%;max-width:calc(100% - 2.4rem);margin:1.2rem;}@media (min-width:1220px){.css-z01v4j-CodeExample--CodeExample{max-width:100ch;}}
26.css-z01v4j-CodeExample--CodeExample pre{margin-top:0;margin-bottom:0;}</style><div class="css-z01v4j-CodeExample--CodeExample"><pre>.post { 27 display: grid; 28 grid-template-columns: minmax(1.2rem, 1fr) minmax(auto, 57ch) minmax(1.2rem, 1fr); 29} 30 31/* position text paragraphs into the second (middle) column */ 32p { 33 grid-column: 2; 34} 35 36/* position images to take up all three columns */ 37img { 38 grid-column: 1 / 4; 39 width: 100%; 40 max-width: 100ch; 41 justify-self: center; 42}</pre><style data-emotion-css="1c3dbua-CodeExample--Pencil">.css-1c3dbua-CodeExample--Pencil{background-image:url(/img/pencil.png);background-repeat:no-repeat;background-position:top right;background-size:contain;height:23px;width:23px;position:absolute;top:1rem;right:1rem;}</style><div class="css-1c3dbua-CodeExample--Pencil e1n4s5uk0"></div><style data-emotion-css="182zgmc-CodeExample--CodeExample">.css-182zgmc-CodeExample--CodeExample{overflow-y:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch;}</style><div class="css-182zgmc-CodeExample--CodeExample"><iframe title="geddski code example" width="100%" style="outline:none;border:none;padding:0;margin:0"></iframe></div></div><p>The only other thing to note is how we positioned the items into the grid using <code>grid-column</code>.</p><p>Play with the above code and see how it reacts if you change the size of the columns or the item positioning. Remember the grid tracks are invisible, but you can see 'em with your browser's <a href="/post/invisible-grid/">Grid Inspector</a>.</p><h2 id="Suspiciously-Easy"><a href="#Suspiciously-Easy">Suspiciously Easy</a></h2><div class="css-1j3xrpn"><img src="/img/shiny.jpg"/></div><p>Sure, we could have built this layout using oldschool CSS: add in a couple of wrapper divs, don't forget padding and auto margin, set max-width, throw in a couple of media queries, and we're done.</p><p>But Grid makes it <em>easy</em>. And intuitive. And <strong>maintainable</strong>. CSS has needed something like this for a loooong time.</p><p>CSS Grid is the gift that keeps on giving. The building blocks it adds to the web are pretty simple. But we're only beginning to discover the awesome ways we can combine them to build awesome stuff!</p></div><style data-emotion-css="30lvjw">.css-30lvjw{display:grid;grid-template-columns:minmax(1.2rem,1fr) minmax(auto,57ch) minmax( 1.2rem, 1fr );}</style><div class="css-30lvjw"><style data-emotion-css="ed7itv-promo--Promo">.css-ed7itv-promo--Promo{grid-column:1 / 4;margin:1.2rem;margin-bottom:0;max-width:100ch;justify-self:center;}</style><a href="https://gridcritters.com" class="css-ed7itv-promo--Promo"><img src="/gc/grid-critters-footer.jpg" alt="Grid Critters Game"/></a><style data-emotion-css="14a4lt-promo--Promo">.css-14a4lt-promo--Promo{grid-column:2;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:2.4rem 0;}</style><p class="css-14a4lt-promo--Promo">Master CSS Grid right from the start by playing this new mastery 43 game. You'll learn the ins and outs of Grids one fun level at a time, 44 while saving an adorable alien life form from certain destruction.<style data-emotion-css="1ivmapb-Button--styles">.css-1ivmapb-Button--styles{display:inline-block;color:#7d7d80;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;border:1px solid #7d7d80;padding:0.25rem 1rem;margin-top:1rem;font-size:0.75rem;}.css-1ivmapb-Button--styles:hover{color:#d13f73;border-color:#d13f73;}.css-1ivmapb-Button--styles:active{color:#90319b;border-color:#90319b;}</style><a href="https://gridcritters.com" class="css-1ivmapb-Button--styles">Master CSS Grid</a></p></div><style data-emotion-css="1wychlm">.css-1wychlm{background:#232327;display:grid;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-auto-flow:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:2.5rem 1.2rem 5rem 1.2rem;height:40px;color:#818184;font-size:0.65rem;}</style><div class="css-1wychlm"><a href="/"><style data-emotion-css="1urbhbt">.css-1urbhbt{height:60px;display:grid;grid-template-columns:60px 150px;grid-column-gap:10px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1urbhbt"><style data-emotion-css="uwwqev">.css-uwwqev{width:100%;height:100%;}</style><div class="css-uwwqev">
44<svg width="100%" height="100%" viewBox="0 0 163 163" fill="none"><path d="M39.8112 63.6343L60.4997 42.9458C61.8163 41.6292 62.4747 40.9708 62.7213 40.2117C62.9383 39.5439 62.9383 38.8246 62.7213 38.1569C62.4747 37.3978 61.8163 36.7394 60.4997 35.4228L57.0516 31.9747C55.7349 30.658 55.0766 29.9997 54.3174 29.753C53.6497 29.5361 52.9304 29.5361 52.2626 29.753C51.5035 29.9997 50.8452 30.658 49.5285 31.9747L17.8689 63.6343C16.5522 64.951 15.8939 65.6093 15.6472 66.3685C15.4302 67.0362 15.4302 67.7555 15.6472 68.4233C15.8939 69.1824 16.5522 69.8407 17.8689 71.1574L49.5285 102.817C50.8452 104.134 51.5035 104.792 52.2626 105.039C52.9304 105.256 53.6497 105.256 54.3174 105.039C55.0766 104.792 55.7349 104.134 57.0516 102.817L60.4997 99.369C61.8163 98.0523 62.4747 97.394 62.7213 96.6348C62.9383 95.9671 62.9383 95.2478 62.7213 94.58C62.4747 93.8209 61.8163 93.1625 60.4997 91.8459L39.8112 71.1574C38.4945 69.8407 37.8362 69.1824 37.5895 68.4233C37.3726 67.7555 37.3726 67.0362 37.5895 66.3685C37.8362 65.6093 38.4945 64.951 39.8112 63.6343Z" fill="white"></path><path d="M102.504 35.4225L105.952 31.9744C107.269 30.6577 107.927 29.9994 108.686 29.7527C109.354 29.5358 110.073 29.5358 110.741 29.7527C111.5 29.9994 112.158 30.6577 113.475 31.9744L145.135 63.634C146.451 64.9507 147.11 65.609 147.356 66.3681C147.573 67.0359 147.573 67.7552 147.356 68.4229C147.11 69.1821 146.451 69.8404 145.135 71.1571L113.475 102.817C112.158 104.133 111.5 104.792 110.741 105.038C110.073 105.255 109.354 105.255 108.686 105.038C107.927 104.792 107.268 104.133 105.952 102.817L102.504 99.3687C101.187 98.052 100.529 97.3937 100.282 96.6345C100.065 95.9668 100.065 95.2475 100.282 94.5797C100.529 93.8206 101.187 93.1622 102.504 91.8456L123.192 71.1571C124.509 69.8404 125.167 69.1821 125.414 68.423C125.631 67.7552 125.631 67.0359 125.414 66.3681C125.167 65.609 124.509 64.9507 123.192 63.634L102.504 42.9455C101.187 41.6289 100.529 40.9705 100.282 40.2114C100.065 39.5436 100.065 38.8243 100.282 38.1566C100.529 37.3974 101.187 36.7391 102.504 35.4225Z" fill="white"></path><path d="M74.6052 105.952L71.1571 102.504C69.8405 101.187 69.1821 100.529 68.423 100.282C67.7552 100.065 67.0359 100.065 66.3682 100.282C65.6091 100.529 64.9507 101.187 63.6341 102.504L57.0517 109.086C55.7349 110.403 55.0765 111.061 54.3173 111.308C53.6495 111.525 52.9302 111.525 52.2624 111.308C51.5033 111.061 50.8449 110.403 49.5283 109.086L14.7364 74.288C13.4198 72.9712 12.7614 72.3127 12.0023 72.066C11.3345 71.849 10.6151 71.849 9.94734 72.0659C9.18816 72.3126 8.52978 72.971 7.21301 74.2877L3.76448 77.7363C2.44788 79.0529 1.78958 79.7112 1.54292 80.4703C1.32595 81.138 1.32593 81.8573 1.54286 82.525C1.78949 83.2841 2.44775 83.9425 3.76428 85.2591L49.5283 131.028C50.845 132.345 51.5033 133.003 52.2624 133.25C52.9302 133.467 53.6495 133.467 54.3173 133.25C55.0765 133.004 55.7349 132.345 57.0516 131.028L74.6052 113.475C75.9219 112.158 76.5802 111.5 76.8269 110.741C77.0439 110.073 77.0439 109.354 76.8269 108.686C76.5802 107.927 75.9219 107.268 74.6052 105.952Z" fill="#BCB9C5"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M79.1479 30.564L44.6671 65.0448C43.3687 66.3432 43.3687 68.4483 44.6671 69.7468L107.359 132.439C108.658 133.737 110.763 133.737 112.061 132.439L160.647 83.8485C161.945 82.55 161.945 80.445 160.647 79.1467L154.377 72.8769C153.078 71.5785 150.973 71.5785 149.675 72.8771L112.061 110.496C110.763 111.795 108.658 111.795 107.359 110.497L94.821 97.9583C93.5226 96.6599 93.5226 94.5548 94.821 93.2564L118.331 69.7467C119.629 68.4483 119.629 66.3432 118.331 65.0448L83.8498 30.564C82.5514 29.2656 80.4463 29.2656 79.1479 30.564ZM86.9808 58.7803C82.22 63.5412 82.22 71.2599 86.9808 76.0207C91.7416 80.7815 99.4604 80.7815 104.221 76.0207C108.982 71.2599 108.982 63.5411 104.221 58.7803C99.4604 54.0195 91.7416 54.0195 86.9808 58.7803Z" fill="#BCB9C5"></path><path d="M101.086 72.8856C98.0566 75.9152 93.1446 75.9152 90.115 72.8856C87.0854 69.856 87.0854 64.9441 90.115 61.9145C93.1446 58.8849 98.0566 58.8849 101.086 61.9145C104.116 64.9441 104.116 69.856 101.086 72.8856Z" fill="white"></path></svg></div><div class="css-0">
44<svg width="100%" height="100%" viewBox="0 0 303 48" fill="none"><path d="M168.24 43.24C166.539 44.941 163.781 44.941 162.08 43.24C160.379 41.539 160.379 38.781 162.08 37.08C163.781 35.379 166.539 35.379 168.24 37.08C169.941 38.781 169.941 41.539 168.24 43.24Z" fill="white"></path><path d="M2.41477 39H8.46591V25.9034C8.46591 23.4886 10 21.8835 12.017 21.8835C14.0057 21.8835 15.3409 23.2472 15.3409 25.392V39H21.2074V25.6761C21.2074 23.4176 22.5 21.8835 24.7017 21.8835C26.6335 21.8835 28.0824 23.0909 28.0824 25.5199V39H34.1193V24.3267C34.1193 19.5966 31.3068 16.8977 27.2443 16.8977C24.0483 16.8977 21.5625 18.5312 20.6676 21.0312H20.4403C19.7443 18.5028 17.5142 16.8977 14.517 16.8977C11.5767 16.8977 9.34659 18.4602 8.4375 21.0312H8.18182V17.1818H2.41477V39ZM45.1207 39.4119C48.3452 39.4119 50.4332 38.0057 51.4986 35.9744H51.669V39H57.4077V24.2841C57.4077 19.0852 53.0043 16.8977 48.1463 16.8977C42.919 16.8977 39.4815 19.3977 38.6435 23.375L44.2401 23.8295C44.652 22.3807 45.9446 21.3153 48.1179 21.3153C50.1776 21.3153 51.3565 22.3523 51.3565 24.142V24.2273C51.3565 25.6335 49.8651 25.8182 46.0724 26.1875C41.7543 26.5852 37.8764 28.0341 37.8764 32.9062C37.8764 37.2244 40.9588 39.4119 45.1207 39.4119ZM46.8537 35.2358C44.9929 35.2358 43.6577 34.3693 43.6577 32.7074C43.6577 31.0028 45.0639 30.1648 47.1946 29.8665C48.5156 29.6818 50.6747 29.3693 51.3991 28.8864V31.2017C51.3991 33.4886 49.5099 35.2358 46.8537 35.2358ZM80.2557 23.4034C79.7159 19.3835 76.4773 16.8977 70.9659 16.8977C65.3835 16.8977 61.7045 19.483 61.7188 23.6875C61.7045 26.9545 63.7642 29.071 68.0256 29.9233L71.804 30.6761C73.7074 31.0597 74.5739 31.7557 74.6023 32.8494C74.5739 34.142 73.1676 35.0653 71.0511 35.0653C68.892 35.0653 67.4574 34.142 67.0881 32.3665L61.1364 32.679C61.7045 36.8551 65.2557 39.4261 71.0369 39.4261C76.6903 39.4261 80.7386 36.5426 80.7528 32.2386C80.7386 29.0852 78.679 27.196 74.446 26.3295L70.4972 25.5341C68.4659 25.0938 67.7131 24.3977 67.7273 23.3466C67.7131 22.0398 69.1903 21.1875 71.0653 21.1875C73.1676 21.1875 74.4176 22.3381 74.7159 23.7443L80.2557 23.4034ZM96.1683 17.1818H92.0632V11.9545H86.0121V17.1818H83.0291V21.7273H86.0121V33.0909C85.9837 37.3665 88.8956 39.483 93.2848 39.2983C94.8473 39.2415 95.9553 38.929 96.5661 38.7301L95.6143 34.2273C95.3161 34.2841 94.6768 34.4261 94.1087 34.4261C92.9013 34.4261 92.0632 33.9716 92.0632 32.2955V21.7273H96.1683V17.1818ZM109.819 39.4261C115.217 39.4261 118.853 36.7983 119.705 32.75L114.109 32.3807C113.498 34.0426 111.935 34.9091 109.918 34.9091C106.893 34.9091 104.975 32.9062 104.975 29.6534V29.6392H119.833V27.9773C119.833 20.5625 115.344 16.8977 109.577 16.8977C103.157 16.8977 98.995 21.4574 98.995 28.1903C98.995 35.108 103.1 39.4261 109.819 39.4261ZM104.975 25.8892C105.103 23.4034 106.992 21.4148 109.677 21.4148C112.305 21.4148 114.123 23.2898 114.137 25.8892H104.975ZM123.782 39H129.833V26.6562C129.833 23.9716 131.793 22.125 134.464 22.125C135.302 22.125 136.452 22.267 137.021 22.4517V17.0824C136.481 16.9545 135.728 16.8693 135.117 16.8693C132.674 16.8693 130.671 18.2898 129.876 20.9886H129.648V17.1818H123.782V39ZM144.549 47.1392C149.052 47.1392 151.452 44.8523 152.674 41.358L161.154 17.2102L154.748 17.1818L150.188 33.2045H149.961L145.444 17.1818H139.08L146.907 39.625L146.552 40.5483C145.7 42.5227 144.237 42.6648 142.106 41.9972L140.742 46.5284C141.609 46.8835 143.015 47.1392 144.549 47.1392Z" fill="white"></path><path d="M183.244 47.4943C189.48 47.4943 193.912 44.6534 193.912 39.2131V17.1818H187.903V20.8466H187.676C186.866 19.071 185.091 16.8977 181.44 16.8977C176.653 16.8977 172.605 20.6193 172.605 28.0483C172.605 35.3068 176.54 38.6875 181.455 38.6875C184.935 38.6875 186.881 36.9403 187.676 35.1364H187.932V39.1278C187.932 41.983 186.014 43.1477 183.386 43.1477C180.716 43.1477 179.366 41.983 178.869 40.804L173.273 41.5568C173.997 44.8523 177.364 47.4943 183.244 47.4943ZM183.372 34.142C180.403 34.142 178.784 31.7841 178.784 28.0199C178.784 24.3125 180.375 21.7131 183.372 21.7131C186.312 21.7131 187.96 24.1989 187.96 28.0199C187.96 31.8693 186.284 34.142 183.372 34.142ZM204.949 39.4119C208.173 39.4119 210.261 38.0057 211.327 35.9744H211.497V39H217.236V24.2841C217.236 19.0852 212.832 16.8977 207.974 16.8977C202.747 16.8977 199.31 19.3977 198.472 23.375L204.068 23.8295C204.48 22.3807 205.773 21.3153 207.946 21.3153C210.006 21.3153 211.185 22.3523 211.185 24.142V24.2273C211.185 25.6335 209.693 25.8182 205.901 26.1875C201.582 26.5852 197.705 28.0341 197.705 32.9062C197.705 37.2244 200.787 39.4119 204.949 39.4119ZM206.682 35.2358C204.821 35.2358 203.486 34.3693 203.486 32.7074C203.486 31.0028 204.892 30.1648 207.023 29.8665C208.344 29.6818 210.503 29.3693 211.227 28.8864V31.2017C211.227 33.4886 209.338 35.2358 206.682 35.2358ZM221.93 39H227.982V25.9034C227.982 23.4886 229.516 21.8835 231.533 21.8835C233.521 21.8835 234.857 23.2472 234.857 25.392V39H240.723V25.6761C240.723 23.4176 242.016 21.8835 244.217 21.8835C246.149 21.8835 247.598 23.0909 247.598 25.5199V39H253.635V24.3267C253.635 19.5966 250.822 16.8977 246.76 16.8977C243.564 16.8977 241.078 18.5312 240.183 21.0312H239.956C239.26 18.5028 237.03 16.8977 234.033 16.8977C231.092 16.8977 228.862 18.4602 227.953 21.0312H227.697V17.1818H221.93V39ZM268.358 39.4261C273.756 39.4261 277.392 36.7983 278.244 32.75L272.648 32.3807C272.037 34.0426 270.474 34.9091 268.457 34.9091C265.432 34.9091 263.514 32.9062 263.514 29.6534V29.6392H278.372V27.9773C278.372 20.5625 273.884 16.8977 268.116 16.8977C261.696 16.8977 257.534 21.4574 257.534 28.1903C257.534 35.108 261.639 39.4261 268.358 39.4261ZM263.514 25.8892C263.642 23.4034 265.531 21.4148 268.216 21.4148C270.844 21.4148 272.662 23.2898 272.676 25.8892H263.514ZM300.474 23.4034C299.935 19.3835 296.696 16.8977 291.185 16.8977C285.602 16.8977 281.923 19.483 281.938 23.6875C281.923 26.9545 283.983 29.071 288.244 29.9233L292.023 30.6761C293.926 31.0597 294.793 31.7557 294.821 32.8494C294.793 34.142 293.386 35.0653 291.27 35.0653C289.111 35.0653 287.676 34.142 287.307 32.3665L281.355 32.679C281.923 36.8551 285.474 39.4261 291.256 39.4261C296.909 39.4261 300.957 36.5426 300.972 32.2386C300.957 29.0852 298.898 27.196 294.665 26.3295L290.716 25.5341C288.685 25.0938 287.932 24.3977 287.946 23.3466C287.932 22.0398 289.409 21.1875 291.284 21.1875C293.386 21.1875 294.636 22.3381 294.935 23.7443L300.474 23.4034Z" fill="#BCB9C4"></path></svg></div></div></a><a href="https://twitter.com/geddski"><style data-emotion-css="1vbyyjb">.css-1vbyyjb{background-image:url(/img/logos/twitter-blue.png);background-repeat:no-repeat;background-size:contain;height:30px;width:30px;-webkit-filter:grayscale(100%) brightness(135%) contrast(120%);-webkit-filter:grayscale(100%) brightness(135%) contrast(120%);filter:grayscale(100%) brightness(135%) contrast(120%);}.css-1vbyyjb:hover{-webkit-filter:grayscale(0%) brightness(100%) contrast(100%);-webkit-filter:grayscale(0%) brightness(100%) contrast(100%);filter:grayscale(0%) brightness(100%) contrast(100%);}</style><div class="css-1vbyyjb"></div></a><span><a href="/privacy">Privacy Policy</a>  <span>© 2016-2022 Mastery Games</span></span></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;
44border:0" aria-live="assertive" aria-atomic="true"></div></div>
44<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/post/article-grid-layout/";/*]]>*/</script>
44<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-727925f955df7662188b.js"],"app":["/app-2b888dd579ec2c43d988.js"],"component---src-build-overwatch-hero-picker-mdx":["/component---src-build-overwatch-hero-picker-mdx-8bd71898d225d89290f2.js"],"component---src-build-zelda-mdx":["/component---src-build-zelda-mdx-98542d282fa63be54327.js"],"component---src-flexbox-challenge-1-mdx":["/component---src-flexbox-challenge-1-mdx-739f5bd98e1832da5fc4.js"],"component---src-flexbox-challenge-10-mdx":["/component---src-flexbox-challenge-10-mdx-0d6cc277dbe72fc2c8c9.js"],"component---src-flexbox-challenge-11-mdx":["/component---src-flexbox-challenge-11-mdx-bb4e84d0870dd615f412.js"],"component---src-flexbox-challenge-2-mdx":["/component---src-flexbox-challenge-2-mdx-6478a0b6fba70a0fb3f1.js"],"component---src-flexbox-challenge-3-mdx":["/component---src-flexbox-challenge-3-mdx-9fde9087f9f73244e387.js"],"component---src-flexbox-challenge-4-mdx":["/component---src-flexbox-challenge-4-mdx-77526c59a3516df53dc5.js"],"component---src-flexbox-challenge-5-mdx":["/component---src-flexbox-challenge-5-mdx-913413d486c6223202cd.js"],"component---src-flexbox-challenge-6-mdx":["/component---src-flexbox-challenge-6-mdx-ec5e2c854a690ea84a04.js"],"component---src-flexbox-challenge-7-mdx":["/component---src-flexbox-challenge-7-mdx-d06e532bc40e8b80a4e1.js"],"component---src-flexbox-challenge-8-mdx":["/component---src-flexbox-challenge-8-mdx-006d1f12697954ecea3c.js"],"component---src-flexbox-challenge-9-mdx":["/component---src-flexbox-challenge-9-mdx-cecac9b4b52f1ee761c2.js"],"component---src-pages-404-js":["/component---src-pages-404-js-0a5ba4411999c67612fa.js"],"component---src-pages-contact-js":["/component---src-pages-contact-js-025d9969adf318d07941.js"],"component---src-pages-fulfillment-js":["/component---src-pages-fulfillment-js-cec61b4a4f934fc6d1c2.js"],"component---src-pages-index-js":["/component---src-pages-index-js-62676b48d85a35ff5de0.js"],"component---src-pages-newsletter-js":["/component---src-pages-newsletter-js-d6a0276f513dfe9a1f8a.js"],"component---src-pages-privacy-js":["/component---src-pages-privacy-js-371a43104cc55961e7e8.js"],"component---src-post-80-reasons-to-love-the-web-mdx":["/component---src-post-80-reasons-to-love-the-web-mdx-66db3c08caec873212d1.js"],"component---src-post-article-grid-layout-mdx":["/component---src-post-article-grid-layout-mdx-39180f4cbfd17c47eff0.js"],"component---src-post-board-gaming-in-figma-mdx":["/component---src-post-board-gaming-in-figma-mdx-738e0f0c9f8b748f3b32.js"],"component---src-post-boilerplates-mdx":["/component---src-post-boilerplates-mdx-f4f4329496467eaa4f8c.js"],"component---src-post-character-animation-mdx":["/component---src-post-character-animation-mdx-e38f3d5567e51b3f421e.js"],"component---src-post-deliberate-practice-mdx":["/component---src-post-deliberate-practice-mdx-bda9c865683b67545ad8.js"],"component---src-post-dynamic-svg-components-mdx":["/component---src-post-dynamic-svg-components-mdx-f0a50fb576f704ccd293.js"],"component---src-post-easy-on-the-webgl-mdx":["/component---src-post-easy-on-the-webgl-mdx-db4dbf5b801a3cc26b1f.js"],"component---src-post-estimate-becomes-deadline-mdx":["/component---src-post-estimate-becomes-deadline-mdx-3cf1cfb5f7000adc8029.js"],"component---src-post-favorite-gear-mdx":["/component---src-post-favorite-gear-mdx-184fede328c69c8af755.js"],"component---src-post-favorite-tools-mdx":["/component---src-post-favorite-tools-mdx-c68c1c5ef5bea574c051.js"],"component---src-post-firefox-for-layout-mdx":["/component---src-post-firefox-for-layout-mdx-a2402014b0dca9d76acd.js"],"component---src-post-flex-shorthand-mdx":["/component---src-post-flex-shorthand-mdx-6f02258a9806a71b88d2.js"],"component---src-post-flex-wrap-mdx":["/component---src-post-flex-wrap-mdx-992bc5db7b883baf2dce.js"],"component---src-post-flexbox-inspector-mdx":["/component---src-post-flexbox-inspector-mdx-9b87fda85bd5bfc58cb5.js"],"component---src-post-flexbox-order-mdx":["/component---src-post-flexbox-order-mdx-6c43dec6383cbab53d65.js"],"component---src-post-flexbox-pitfalls-mdx":["/component---src-post-flexbox-pitfalls-mdx-0a5c9dc512072a4769c2.js"],"component---src-post-flexboxzombies-2-mdx":["/component---src-post-flexboxzombies-2-mdx-67f5a4199a343246db5a.js"],"component---src-post-gratitude-project-mdx":["/component---src-post-gratitude-project-mdx-c0f84cddedfdb7bf8ab7.js"],"component---src-post-grid-beats-flexbox-full-page-layout-mdx":["/component---src-post-grid-beats-flexbox-full-page-layout-mdx-1746532d54c25e693917.js"],"component---src-post-grid-for-responsive-layout-mdx":["/component---src-post-grid-for-responsive-layout-mdx-ea2782920f850d612c8e.js"],"component---src-post-grid-inspector-mdx":["/component---src-post-grid-inspector-mdx-175aeb9833483c4673a2.js"],"component---src-post-grid-item-placement-mdx":["/component---src-post-grid-item-placement-mdx-9b311935ed5b5724c28d.js"],"component---src-post-grid-track-options-mdx":["/component---src-post-grid-track-options-mdx-e8e205a914046ae9e066.js"],"component---src-post-gridcritters-launch-mdx":["/component---src-post-gridcritters-launch-mdx-1777016554c88b27b5d5.js"],"component---src-post-how-to-defeat-the-cascade-mdx":["/component---src-post-how-to-defeat-the-cascade-mdx-2ac6815828b08ee6bba8.js"],"component---src-post-how-to-pin-element-to-center-of-parent-mdx":["/component---src-post-how-to-pin-element-to-center-of-parent-mdx-c07fb97fdb5beb7de6c2.js"],"component---src-post-indiehackers-mdx":["/component---src-post-indiehackers-mdx-a46c1bbd67350636832d.js"],"component---src-post-invisible-grid-mdx":["/component---src-post-invisible-grid-mdx-3ddcaf8501631fddfbb3.js"],"component---src-post-learn-to-draw-mdx":["/component---src-post-learn-to-draw-mdx-5b3893b6b765514f5d77.js"],"component---src-post-level-up-coding-with-macros-mdx":["/component---src-post-level-up-coding-with-macros-mdx-5557aae5e7d4888642c0.js"],"component---src-post-mastery-games-platform-mdx":["/component---src-post-mastery-games-platform-mdx-97d13cb93a49a73b8c77.js"],"component---src-post-mastery-through-play-mdx":["/component---src-post-mastery-through-play-mdx-44876639c89ede675c04.
44js"],"component---src-post-modern-web-podcast-mdx":["/component---src-post-modern-web-podcast-mdx-9d3645487bd6a7c2abba.js"],"component---src-post-naming-css-grid-lines-mdx":["/component---src-post-naming-css-grid-lines-mdx-b50ae78a99ce44d292b1.js"],"component---src-post-new-grid-site-mdx":["/component---src-post-new-grid-site-mdx-3b70103161ea4a00d610.js"],"component---src-post-overcoming-fear-and-doing-your-own-thing-mdx":["/component---src-post-overcoming-fear-and-doing-your-own-thing-mdx-ff41793d3115fed0b7ad.js"],"component---src-post-overlapping-grid-items-mdx":["/component---src-post-overlapping-grid-items-mdx-649bd27e3edd2c98b2a3.js"],"component---src-post-polish-makes-perfect-mdx":["/component---src-post-polish-makes-perfect-mdx-44997afd0b7a71d1cf8a.js"],"component---src-post-polish-mdx":["/component---src-post-polish-mdx-b0e651b088fa679719ee.js"],"component---src-post-position-sticky-mdx":["/component---src-post-position-sticky-mdx-c220e6ca2875f01e0cd2.js"],"component---src-post-power-of-mastery-mdx":["/component---src-post-power-of-mastery-mdx-9cc64c51746b49c72212.js"],"component---src-post-practice-css-mdx":["/component---src-post-practice-css-mdx-7e6f21f3c7ee871474ea.js"],"component---src-post-react-podcast-mdx":["/component---src-post-react-podcast-mdx-6fe69d972290a9cfb02b.js"],"component---src-post-routine-success-mdx":["/component---src-post-routine-success-mdx-1982df01652706544093.js"],"component---src-post-service-workies-chapter-2-mdx":["/component---src-post-service-workies-chapter-2-mdx-0fe86dd32fb3908dfa17.js"],"component---src-post-service-workies-chapter-3-mdx":["/component---src-post-service-workies-chapter-3-mdx-08137bd16e9766290f75.js"],"component---src-post-service-workies-chapter-4-mdx":["/component---src-post-service-workies-chapter-4-mdx-fd13aff857f9fb72281e.js"],"component---src-post-shiny-new-grid-tools-mdx":["/component---src-post-shiny-new-grid-tools-mdx-78817b3b824b1cdafe34.js"],"component---src-post-signs-you-need-a-new-project-mdx":["/component---src-post-signs-you-need-a-new-project-mdx-6d6af53404e33e664107.js"],"component---src-post-solve-it-once-mdx":["/component---src-post-solve-it-once-mdx-a56e4f34f97046a1efa8.js"],"component---src-post-state-machines-in-react-mdx":["/component---src-post-state-machines-in-react-mdx-4e1c962bc444d39c9977.js"],"component---src-post-strong-components-mdx":["/component---src-post-strong-components-mdx-d7a68d818356263e96e6.js"],"component---src-post-the-difference-between-width-and-flex-basis-mdx":["/component---src-post-the-difference-between-width-and-flex-basis-mdx-40371b81e379c2515c03.js"],"component---src-post-tile-layouts-mdx":["/component---src-post-tile-layouts-mdx-ab92de4e2bd17952c37e.js"],"component---src-post-truly-ergonomic-keyboard-review-mdx":["/component---src-post-truly-ergonomic-keyboard-review-mdx-6c0f5e1c327b84e530e4.js"],"component---src-post-unstuck-mdx":["/component---src-post-unstuck-mdx-563874ca1e0c38efda6a.js"],"component---src-post-warm-coding-hands-mdx":["/component---src-post-warm-coding-hands-mdx-4daec1da265af33b9314.js"],"component---src-post-what-mastering-flexbox-will-do-for-you-mdx":["/component---src-post-what-mastering-flexbox-will-do-for-you-mdx-da2dce0af146be6911b2.js"],"component---src-post-what-not-to-learn-mdx":["/component---src-post-what-not-to-learn-mdx-4604cc1b24a85746481b.js"],"component---src-post-what-to-do-with-user-feedback-mdx":["/component---src-post-what-to-do-with-user-feedback-mdx-13673d84949257554052.js"],"component---src-post-when-tech-makes-you-feel-dumb-mdx":["/component---src-post-when-tech-makes-you-feel-dumb-mdx-40d325185844f0845de8.js"],"component---src-post-working-with-media-queries-mdx":["/component---src-post-working-with-media-queries-mdx-8df98f77835c818c2865.js"]};/*]]>*/</script>
44<script src="/polyfill-727925f955df7662188b.js" nomodule=""></script>
44<script src="/component---src-post-article-grid-layout-mdx-39180f4cbfd17c47eff0.js" async=""></script>
44<script src="/app-2b888dd579ec2c43d988.js" async=""></script>
44<script src="/c4fa3097-a9bdec3b1ea18429d7e2.js" async=""></script>
44<script src="/0b2db5e9-b542a77d2c9a3c7fc729.js" async=""></script>
44<script src="/fba43109-93aa8ade80b8913df88f.js" async=""></script>
44<script src="/880a94f0-983b533469e5b1a2d854.js" async=""></script>
44<script src="/edac63d6-f9ee27a8187daf001162.js" async=""></script>
44<script src="/74375b67-761e73b1fdcf6e43136a.js" async=""></script>
44<script src="/styles-468f6f31173e37a60e9a.js" async=""></script>
44<script src="/framework-20469c3b8702cb7a345d.js" async=""></script>
44<script src="/webpack-runtime-ed42cc051f8f122e4270.js" async=""></script>
44<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"5fe77fe9c02240a898308bcac0133463","r":1,"spa":2}' crossorigin="anonymous"></script>
44 45</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.