1import"../chunks/DsnmJJEf.js";import"../chunks/BYWlvAXa.js";import{b as M,s as a,f as D,a as z,g as s,r as n,n as O}from"../chunks/fEOkbmZ0.js";import{h as t}from"../chunks/DptkvrQI.js";import{l as P,s as V}from"../chunks/CDMT35eg.js";import{A as j}from"../chunks/C5Hd9ct8.js";const f={title:"The Simplest CSS Grids",description:"Learn the most common CSS Grid layouts with copy-pastable examples for two-column layouts, sidebar navigation, and more.",slug:"the-simplest-css-grids",image:null,published:!0,published_at:"2026-01-08T00:00:00.000Z",popular:!0},{title:Q,description:U,slug:X,image:aa,published:sa,published_at:na,popular:ta}=f;var B=M('<p>CSS Grid is all the rage and for a good reason. Itâs the best replacement for any of the previously existing grid solutions. And while CSS grid contains a myriad of CSS properties you can employ and become a power user, most websites fall into a handful of grid setups and Iâd like to quickly go through those and provide you with a copy/pastable grid setup</p> <h2 id="the-two-column-layout"><a class="heading-anchor" aria-label="Link to this section" href="#the-two-column-layout"><span class="heading-anchor-icon">#</span></a>The two column layout</h2> <p>Probably the most common website layout is the 2 column layout. It looks kind of like this:</p> <pre class="language-undefined"><!></pre> <p>For a layout like that, you might be tempted to write it in ârowsâ like so:</p> <pre class="language-html"><!></pre> <p>But CSS Grid doesnât require us to wrap the middle section in a separate div so letâs rewrite that using <em>semantic</em> HTML and leave the presentation to CSS:</p> <pre class="language-html"><!></pre> <p>Thatâs a little better. First, letâs define our grid areas:</p> <pre class="language-css"><!></pre> <p>This letâs us use the <code>grid-template-areas</code> CSS property on the grid. Letâs go ahead and define a grid for the desktop with a 2-to-1 ratio (content is 2x size of the sidebar). Letâs also make it responsive so that this grid exists only on devices with a resolution larger than 800px, otherwise, weâll stick to a single column layout.</p> <pre class="language-css"><!></pre> <h2 id="sidebar-navigation-layout"><a class="heading-anchor" aria-label="Link to this section" href="#sidebar-navigation-layout"><span class="heading-anchor-icon">#</span></a>Sidebar navigation layout</h2> <p>The next very common layout is the sidebar navigation layout with a fixed sidebar navigation and an expanding content area. It looks kind of like this:</p> <pre class="language-undefined"><!></pre> <p>A little different, letâs go ahead and write out the HTML for it:;</p> <pre class="language-html"><!></pre> <p>Not very different from the other one. Next, we need to setup our grid areas:</p> <pre class="language-css"><!></pre> <p>And lastly, letâs make sure the grid looks how we expect it, weâll want to keep the navigation a fixed width and weâll want to make that fixed-width smaller on smaller screens.</p> <pre class="language-css"><!></pre> <h3 id="devtos-layout"><a class="heading-anchor" aria-label="Link to this section" href="#devtos-layout"><span class="heading-anchor-icon">#</span></a>Dev.toâs layout</h3> <p>Lastly, for fun, letâs put together dev.toâs navigation layout. Itâs actually a pretty common layout! Youâll notice that Twitter and Facebook follow this setup as well:</p> <pre class="language-undefined"><!></pre> <p>The HTML for it should look pretty familiar by now e:</p> <pre class="language-html"><!></pre> <p>Then the CSS grid areas:</p> <pre class="language-css"><!></pre> <p>And finally, the whole setup. Dev.to is a little more complicated than the previous examples in that it has 2 breakpoints so 3 different configurations:</p> <ol><li>desktop view - 3 column layout</li> <li>tablet (?) view - 2 column layout with navigation/content visible but no sidebar</li> <li>mobile view - 1 column layout with just content</li></ol> <p>Letâs set that up:</p> <pre class="language-css"><!></pre> <p>Note that I completely dropped <code>sidebar</code> from the last view which means that it wonât be visible without having to do any <code>display: none</code> logic.</p> <h2 id="resources"><a class="heading-anchor" aria-label="Link to this section" href="#resources"><span class="heading-anchor-icon">#</span></a>Resources</h2> <p>Not familiar with CSS grid or want to know more? There are plenty of resources online you can check out, here are some of my others:</p> <ul><li><a href="https://www.youtube.com/watch?v=1MOqDTp6Vwk" rel="nofollow">step by step walkthrough of making a blog grid</a></li> <li><a href="https://www.youtube.com/watch?v=V48baOnbWNA" rel="nofollow">introduction to CSS grids video</a></li></ul>',1);function pa(y,w){const b=P(w,["children","$$slots","$$events","$$legacy"]);j(y,V(()=>b,()=>f,{children:(_,R)=>{var m=B(),p=a(D(m),6),S=s(p);t(S,()=>`<code class="language-undefined">|---------------------| 2| Header/navigation | 3|---------------------| 4| Content | sidebar | 5| | | 6|---------------------| 7| Footer | 8|---------------------|</code>`),n(p);var e=a(p,4),x=s(e);t(x,()=>`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 9 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header/navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 10 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 11 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 12 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sidebar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sidebar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 13 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 14 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 15<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code>`),n(e);var o=a(e,4),C=s(o);t(C,()=>`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 16 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>Header/navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> 17 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> 18 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span>Sidebar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> 19 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> 20<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code>`),n(o);var c=a(o,4),T=s(c);t(T,()=>`<code class="language-css"><span class="token selector">header</span> <span class="token punctuation">{</span> 21 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'header'</span><span class="token punctuation">;</span> 22<span class="token punctuation">}</span> 23 24<span class="token selector">main</span> <span class="token punctuation">{</span> 25 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'content'</span><span class="token punctuation">;</span> 26<span class="token punctuation">}</span> 27 28<span class="token selector">aside</span> <span class="token punctuation">{</span> 29 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'sidebar'</span><span class="token punctuation">;</span> 30<span class="token punctuation">}</span> 31 32<span class="token selector">footer</span> <span class="token punctuation">{</span> 33 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'footer'</span><span class="token punctuation">;</span> 34<span class="token punctuation">}</span></code>`),n(c);var l=a(c,4),q=s(l);t(q,()=>`<code class="language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span> 35 <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr<span class="token punctuation">;</span> 36<span class="token punctuation">}</span> 37 38<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>width > 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> 39 <span class="token selector">.grid</span> <span class="token punctuation">{</span> 40 <span class="token property">grid-template-columns</span><span class="token punctuation">:</span>
40 2fr 1fr<span class="token punctuation">;</span> 41 <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> 42 <span class="token string">'header header'</span> 43 <span class="token string">'content aside'</span> 44 <span class="token string">'footer footer'</span><span class="token punctuation">;</span> 45 <span class="token punctuation">}</span> 46<span class="token punctuation">}</span></code>`),n(l);var u=a(l,6),L=s(u);t(L,()=>`<code class="language-undefined">|---------------------| 47| Header | 48|---------------------| 49| Nav | content | 50| | | 51|---------------------| 52| Footer | 53|---------------------|</code>`),n(u);var i=a(u,4),$=s(i);t($,()=>`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 54 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> 55 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>Nav<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> 56 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> 57 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> 58<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code>`),n(i);var r=a(i,4),H=s(r);t(H,()=>`<code class="language-css"><span class="token selector">header</span> <span class="token punctuation">{</span> 59 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'header'</span><span class="token punctuation">;</span> 60<span class="token punctuation">}</span> 61 62<span class="token selector">main</span> <span class="token punctuation">{</span> 63 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'content'</span><span class="token punctuation">;</span> 64<span class="token punctuation">}</span> 65 66<span class="token selector">nav</span> <span class="token punctuation">{</span> 67 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'nav'</span><span class="token punctuation">;</span> 68<span class="token punctuation">}</span> 69 70<span class="token selector">footer</span> <span class="token punctuation">{</span> 71 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'footer'</span><span class="token punctuation">;</span> 72<span class="token punctuation">}</span></code>`),n(r);var k=a(r,4),N=s(k);t(N,()=>`<code class="language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span> 73 <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 1fr<span class="token punctuation">;</span> 74 <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> 75 <span class="token string">'header header'</span> 76 <span class="token string">'nav content'</span> 77 <span class="token string">'footer footer'</span><span class="token punctuation">;</span> 78<span class="token punctuation">}</span> 79 80<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>width > 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> 81 <span class="token selector">.grid</span> <span class="token punctuation">{</span> 82 <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px 1fr<span class="token punctuation">;</span> 83 <span class="token punctuation">}</span> 84<span class="token punctuation">}</span></code>`),n(k);var d=a(k,6),F=s(d);t(F,()=>`<code class="language-undefined">|-----------------------------------------| 85| Header | 86|-----------------------------------------| 87| Nav | content | Second nav/sidebar | 88| | | | 89|-----------------------------------------|</code>`),n(d);var g=a(d,4),A=s(g);t(A,()=>`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 90 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> 91 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>Nav<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> 92 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> 93 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span>Sidebar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> 94<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code>`),n(g);var h=a(g,4),I=s(h);
94t(I,()=>`<code class="language-css"><span class="token selector">header</span> <span class="token punctuation">{</span> 95 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'header'</span><span class="token punctuation">;</span> 96<span class="token punctuation">}</span> 97 98<span class="token selector">main</span> <span class="token punctuation">{</span> 99 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'content'</span><span class="token punctuation">;</span> 100<span class="token punctuation">}</span> 101 102<span class="token selector">nav</span> <span class="token punctuation">{</span> 103 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'nav'</span><span class="token punctuation">;</span> 104<span class="token punctuation">}</span> 105 106<span class="token selector">aside</span> <span class="token punctuation">{</span> 107 <span class="token property">grid-area</span><span class="token punctuation">:</span> <span class="token string">'sidebar'</span><span class="token punctuation">;</span> 108<span class="token punctuation">}</span></code>`),n(h);var v=a(h,8),G=s(v);t(G,()=>`<code class="language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span> 109 <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr<span class="token punctuation">;</span> 110 <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> 111 <span class="token string">'header'</span> 112 <span class="token string">'content'</span><span class="token punctuation">;</span> 113<span class="token punctuation">}</span> 114 115<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>width > 1024px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> 116 <span class="token selector">.grid</span> <span class="token punctuation">{</span> 117 <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 150px 1fr 150px<span class="token punctuation">;</span> 118 <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> 119 <span class="token string">'header header header'</span> 120 <span class="token string">'nav content sidebar'</span><span class="token punctuation">;</span> 121 <span class="token punctuation">}</span> 122<span class="token punctuation">}</span> 123 124<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>width < 1024px <span class="token keyword">and</span> width > 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> 125 <span class="token selector">.grid</span> <span class="token punctuation">{</span> 126 <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 150px 1fr<span class="token punctuation">;</span> 127 <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> 128 <span class="token string">'header header'</span> 129 <span class="token string">'nav content'</span><span class="token punctuation">;</span> 130 <span class="token punctuation">}</span> 131<span class="token punctuation">}</span></code>`),n(v),O(8),z(_,m)},$$slots:{default:!0}}))}export{pa as component};
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.