Preview:
<div>

<h1>grid-template-areas</h1>

<section class="grid grid-template-areas-1">

  <div class="item logo">logo</div>

  <div class="item nav">nav</div>

  <div class="item content">content</div>

  <div class="item sidenav">sidenav</div>

  <div class="item advert">advert</div>

  <div class="item footer">footer</div>

</section>

</div>

​

<div>

<h1>grid-template-areas</h1>

<section class="grid grid-template-areas-2">

  <div class="item logo">logo</div>

  <div class="item nav">nav</div>

  <div class="item content">content</div>

  <div class="item sidenav">sidenav</div>

  <div class="item advert">advert</div>

  <div class="item footer">footer</div>

</section>

</div>

​
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter