Invalid Property Value CSS GRID

Question

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:

<div class="grid">
      <header class="nav--header">
        <nav class="nav--wrapper">
          <div class="nav--elm">
            <a href="./">
            <span class="nav--elmText"><img src="./assets/img/Rep-Center-Logo.svg"></span>
          </div>
        </nav>
      </header>
      <div class="sidebar">
      </div>
      <div class="content">
      </div>
      <footer class="nav--footer">
      </footer>
</div>

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:

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;
}

If anything stands out to you as to why that is incorrect please let me know.

Answer 1

The error is capitalized:

grid-template-areas:
"header header header header"
"sidebar content content content"
"CONTENT content content content"
"footer footer footer footer";

You can't have a grid-area which isn't a single rectangle. It works if you do this:

grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar content content content"
"footer footer footer footer";

It's often easiest to debug these by going in and adding everything line by line to see where there break is, your first two lines worked but it broke on the third which meant this is where the problem is. On inspection you can then see the issue.

Answer 2

you forgot to close the hyperlink with </a> after <a href="./">