title: Invalid Property Value CSS GRID
body: <p>I am working with css grid and I'm trying to figure out why the code I have been working with is not working.  The following is my code for html5:</p>
  
  <pre><code>&lt;div class="grid"&gt;
        &lt;header class="nav--header"&gt;
          &lt;nav class="nav--wrapper"&gt;
            &lt;div class="nav--elm"&gt;
              &lt;a href="./"&gt;
              &lt;span class="nav--elmText"&gt;&lt;img src="./assets/img/Rep-Center-Logo.svg"&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/header&gt;
        &lt;div class="sidebar"&gt;
        &lt;/div&gt;
        &lt;div class="content"&gt;
        &lt;/div&gt;
        &lt;footer class="nav--footer"&gt;
        &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to create the layout for the website using css grid and I'm getting an invalid property value on my grid-template-areas tag in css.  This is the css I have for it:</p>
  
  <pre><code>html, body, div, span, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  abbr, address, cite, code,
  del, dfn, em, img, ins, kbd, q, samp,
  small, strong, sub, sup, var,
  b, i,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section, summary,
  time, mark, audio, video {
      margin:0;
      padding:0;
      border:0;
      outline:0;
      font-size:100%;
      vertical-align:baseline;
      background:transparent;
  }
  
  body {
      line-height:1;
      background: #efefef;
  }
  
  article,aside,details,figcaption,figure,
  footer,header,hgroup,menu,nav,section {
      display:block;
  }
  
  nav ul {
      list-style:none;
  }
  
  blockquote, q {
      quotes:none;
  }
  
  blockquote:before, blockquote:after,
  q:before, q:after {
      content:'';
      content:none;
  }
  
  a {
      margin:0;
      padding:0;
      font-size:100%;
      vertical-align:baseline;
      background:transparent;
  }
  
  /* change colours to suit your needs */
  ins {
      background-color:#ff9;
      color:#000;
      text-decoration:none;
  }
  
  /* change colours to suit your needs */
  mark {
      background-color:#ff9;
      color:#000;
      font-style:italic;
      font-weight:bold;
  }
  
  del {
      text-decoration: line-through;
  }
  
  abbr[title], dfn[title] {
      border-bottom:1px dotted;
      cursor:help;
  }
  
  table {
      border-collapse:collapse;
      border-spacing:0;
  }
  
  /* change border colour to suit your needs */
  hr {
      display:block;
      height:1px;
      border:0;
      border-top:1px solid #cccccc;
      margin:1em 0;
      padding:0;
  }
  
  input, select {
      vertical-align:middle;
  }
  /* GRID LAYOUT CSS */
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "header header header header"
    "sidebar content content content"
    "content content content content"
    "footer footer footer footer";
  }
  .nav--header {
    grid-area: header;
    background: #2b849f;
  }
  .nav--header .nav--wrapper {
    display: grid;
  }
  .nav--header .nav--wrapper .nav--elm {
    display: inline-grid;
  }
  .nav--header .nav--wrapper .nav--elm .nav--elmText {
  
  }
  .nav--header .nav--wrapper .nav--elm .nav--elmText img {
   width: 60px;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .content {
    grid-area: content;
  }
  .nav--footer {
    grid-area: footer;
  }
  </code></pre>
  
  <p>If anything stands out to you as to why that is incorrect please let me know.</p>