large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://medium.freecodecamp.org/how-to-prototype-websites-quickly-with-css-grid-ffc9cba08583">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div>
<p>Co-founder of Scrimba — a tool for creating interactive coding screencasts: https://scrimba.com.</p>
<p>Nov 30</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*lICyKxZL1ID50fbw2MSXOQ.gif" alt="1*lICyKxZL1ID50fbw2MSXOQ.gif"></div>
</div>
<p>The CSS Grid module is a fantastic tool for creating mockups of websites. It allows you to experiment with the layout faster than any other system I’ve tried.</p>
<p>In this article I’ll teach you how.</p>
<blockquote><p>I’ll also be launching a free CSS Grid course in mid December. If you want early access, <a href="http://eepurl.com/c_R31n">leave your email here</a>, and I’ll send it to you as soon as it’s ready.</p></blockquote>
<p>You can also check out a <a href="https://scrimba.com/p/pRB9Hw/c2gd3T2">preview screencast of the course here.</a></p>
<h3>Our grid</h3>
<p>We’re going to start out with a very basic grid which mimics a classic website:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*F1NggJ-SsRSq306y3vCong.png" alt="1*F1NggJ-SsRSq306y3vCong.png"></div>
</div>
<p>I’ve styled our example a little bit, but that has nothing to do with CSS Grid, so I’m leaving that out.</p>
<p>First, I’ll explain the HTML and CSS we need to get this working, which I’ve broken down to four parts. Once you’ve understood those, we’ll move on to the layout experimentations.</p>
<p>If you’re completely new to CSS Grid, you might want to skim through <a href="https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228">my 5 minute introduction article on the subject.</a></p>
<h4>1. The markup</h4>
<p>The first thing we need is a little bit of HTML. A container (the element we’ll turn into a grid) and the items (header, menu, content, footer).</p>
<pre>&lt;div class="container"&gt;<br>  &lt;div class="header"&gt;HEADER&lt;/div&gt;<br>  &lt;div class="menu"&gt;MENU&lt;/div&gt;<br>  &lt;div class="content"&gt;CONTENT&lt;/div&gt;<br>  &lt;div class="footer"&gt;FOOTER&lt;/div&gt;<br>&lt;/div&gt;</pre>
<h4>2. Basic setup in CSS</h4>
<p>Then we need to setup our grid, and specify how many rows and columns we need. Here’s the first CSS for doing that:</p>
<pre>.container {<br>    display: grid;    <br>    grid-template-columns: repeat(12, 1fr);<br>    grid-template-rows: 50px 350px 50px;<br>    grid-gap: 5px;<br>}</pre>
<p>I’m going to add more later, but I first want you to understand this.</p>
<p>Here’s what the above code says: create a grid with twelve columns, each being one fraction unit wide (1/12 of the total width). Create three rows, where the first will be 50px tall, the second 350px and the third one 50px. Finally, add a gap between the items in the grid.</p>
<h4>3. Adding grid-template-areas</h4>
<p>The feature which will allow us to experiment with layout super easily is called <em>template areas.</em></p>
<p>To add it to the grid we’ll simply give the container a <code>grid-template-areas</code> property. The syntax might be a bit weird, as it’s unlike any other CSS syntax out there. Here it is:</p>
<pre>.container {<br>    display: grid;<br>    grid-gap: 5px;    <br>    grid-template-columns: repeat(12, 1fr);<br>    grid-template-rows: 50px 350px 50px;<br><strong>    grid-template-areas:<br>        "h h h h h h h h h h h h h"<br>        "m m c c c c c c c c c c c"<br>        "f f f f f f f f f f f f f";<br></strong>}</pre>
<p>The logic behind the <code>grid-template-areas</code> property is that you create a visual representation of your grid in the code. As you can see, it has three rows and twelve columns, just like we’ve defined in <code>grid-template-columns</code> and <code>grid-template-rows</code>.</p>
<blockquote><p>Each line represents a row and each of the characters (h, m, c, f) represent a grid cell.</p></blockquote>
<p>Each of the four letters now form a rectangular <code>grid-area</code>.</p>
<p>As you might have guessed, I’ve chosen the characters <code>h</code>, <code>m</code>, <code>c</code>, <code>f</code> because our grid consist of <code>header</code>, <code>menu</code>, <code>content</code> and <code>footer</code>. I could have called them whatever I wanted, of course, but it makes sense to use the first character of the items they’re describing.</p>
<h4>4. Giving areas to the items</h4>
<p>Now we need to connect these characters with our items in the grid. To do that we’ll use the <code>grid-area</code> property:</p>
<pre>.header {<br>    grid-area: h;<br>}</pre>
<pre>.menu {<br>    grid-area: m;<br>}</pre>
<pre>.content {<br>    grid-area: c;<br>}</pre>
<pre>.footer {<br>   grid-area: f;<br>}</pre>
<p>This results in the following layout:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*F1NggJ-SsRSq306y3vCong.png" alt="1*F1NggJ-SsRSq306y3vCong.png"></div>
</div>
<h3>Experimenting with the layout</h3>
<p>Now we’ve finally reached the beauty of this feature, as we can experiment with the layout super easily. It’s just a matter of changing the characters of the <code>grid-template-areas</code> property. Let’s for example move the menu over to the right hand side instead:</p>
<pre><strong>grid-template-areas:<br>        “h h h h h h h h h h h h”<br>        "c c c c c c c c c c m m”<br>        “f f f f f f f f f f f c”;</strong></pre>
<p>Which results in this layout:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*DXjJkGRM_aVa2lVTOj0NyQ.png" alt="1*DXjJkGRM_aVa2lVTOj0NyQ.png"></div>
</div>
<p>We can use dot’s to create blank grid cells.</p>
<pre><strong>grid-template-areas:<br>        “. h h h h h h h h h h .”<br>        "c c c c c c c c c c m m”<br>        “. f f f f f f f f f f .”;</strong></pre>
<p>Here’s a gif of how it plays out.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*bb0X7Sx13xCbrV6PB_o5mQ.gif" alt="1*bb0X7Sx13xCbrV6PB_o5mQ.gif"></div>
</div>
<p>Now I’d recommend you to check out <a href="https://scrimba.com/c/c2gd3T2">this screencast of my CSS Grid course</a>, where you’ll be able to experiment with the code yourself.</p>
<h3>Adding responsiveness to the mix</h3>
<p>Combining this with responsiveness is also a killer feature, as this simply wouldn’t have been possible to do with only HTML and CSS before. Let’s say you want the menu up besides the header when it’s being viewed on mobile. Then you can simply do like this:</p>
<pre>@media screen and (max-width: 640px) {<br>    .container {<br><strong>    grid-template-areas:<br>            "m m m m m m h h h h h h"<br>            "c c c c c c c c c c c c"<br>            "f f f f f f f f f f f f";<br></strong>}<br>}</pre>
<p>And that’ll result in the following:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*GDGkHyEsErCNCgJFiB8Z1w.gif" alt="1*GDGkHyEsErCNCgJFiB8Z1w.gif"></div>
</div>
<p>Remember that all these changes are done with pure CSS, without touching the HTML. We can shuffle around however we want, regardless of how the div tags are laid out in the markup.</p>
<p>This is called source order independence, and it’s a huge step forward for CSS.</p>
<p>It allows the HTML to be what it was intended to be: markup for content. And not for styling, as that’s the job of CSS.</p>
<blockquote><p>If you’re interested in learning more about CSS Grid, <a href="http://eepurl.com/c_R31n">just leave your email here</a>, and I’ll give you early access to my free CSS Grid course once it’s ready.</p></blockquote>
<p>Click the image below to see a preview of the course.</p>
</div>
<div>
<div><a href="https://scrimba.com/c/c2gd3T2"></a></p>
<div><a href="https://scrimba.com/c/c2gd3T2"><img src="https://cdn-images-1.medium.com/max/2000/1*UOpwxw1tMK30dOG1jn6IRg.png" alt="1*UOpwxw1tMK30dOG1jn6IRg.png"></a></div>
<p><a href="https://scrimba.com/c/c2gd3T2"></a></div>
</div>
<div>
<p>Thanks for reading! If you have any feedback or questions, please leave a comment below. Alternatively, reach out to me <a href="https://twitter.com/perborgen">via Twitter</a> 🙂</p>
</div>
</div>
</div>
</div>
<div><a href="https://medium.freecodecamp.org/how-to-prototype-websites-quickly-with-css-grid-ffc9cba08583">https://medium.freecodecamp.org/how-to-prototype-websites-quickly-with-css-grid-ffc9cba08583</a></div>


How to prototype websites quickly with CSS Grid

How to prototype websites quickly with CSS Grid

Top Stories