title: CSS Grid doesn't work as expected (grid areas)
body: <p>Could somebody help me to figure out why the following example of <em>CSS Grid</em> doesn't work as expected? Here's a link into <a href="https://codepen.io/Nekto/pen/yPpaBE" rel="nofollow noreferrer">Codepen</a>:</p>
  
  <pre><code>.cards {
    margin: 0;
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    grid-template-areas:
      "a a b"
      "c d d"
      "c e e";
  }
  
  .card {
    background-color: #1E88E5;
    padding: 2em;
    color: #FFFFFF;
    line-height: 1.4;
    border-radius: 4px;
  }
  
  .card1 { grid-area: "a"; }
  .card2 { grid-area: "b"; background-color: #4CAF50; }
  .card3 { grid-area: "c"; background-color: #FFCA28; }
  .card4 { grid-area: "d"; background-color: #F06292; }
  .card5 { grid-area: "e"; background-color: #FF8A80; }
  </code></pre>
  
  <p>For some reason grid areas are not properly structured. Probably I forgot something but I couldn't figure out what exactly.
  Any help is appreciated. Thank you!</p>