CSS Grid Invalid Property Value when using grid-template-areas

Question

This may be obvious but I have been stuck on it for a while and have searched stackoverflow to no avail.

Everywhere I have a grid-area value I am getting "invalid property value" in google chrome when looking at the elements.

The content is simply being placed in the 3rd grid item on the left when it should be in the 4th.

.dashboard {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 50px auto;
  grid-template-areas: 
    "left top"
    "left content";
  height: 100vh;
}

.left-nav {
  grid-area: "left";
}

.top-nav {
  grid-area: "top";
}

.content {
  grid-area: "content";
}

<div class="dashboard">
  <div class="left-nav">
    LEFT
    <app-left-nav></app-left-nav>
  </div>
  <div class="top-nav">
    TOP
    <app-top-nav></app-top-nav>
  </div>
  <div class="content">
    CONTENT
    <router-outlet></router-outlet>
  </div>
</div>

I recommend placing your code inside a runnable snippet to make responders easier ;-) — Richard, May 12 '20 at 03:23
The value inside `grid-area` must not be surrounded by double quotation marks (`"`). — Richard, May 12 '20 at 03:28
Thanks I will do that next time! And thanks for the answer I knew it was obvious. I simply couldn't see the quotes as I had been staring at it to long. — MadMac, May 12 '20 at 03:59

score 2 · Accepted Answer · answered May 12 '20 at 03:37

You should have the attribute value without quotes grid-area: top;:

.dashboard {
  display: grid;
  grid-template-areas: 
    'left top'
    'left content';
      height: 100vh;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.dashboard > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.left-nav {
  grid-area: left;
}

.top-nav {
  grid-area: top;
}

.content {
  grid-area: content;
}

<div class="dashboard">
  <div class="left-nav">
    LEFT
    <app-left-nav></app-left-nav>
  </div>
  <div class="top-nav">
    TOP
    <app-top-nav></app-top-nav>
  </div>
  <div class="content">
    CONTENT
    <router-outlet></router-outlet>
  </div>
</div>

CSS Grid Invalid Property Value when using grid-template-areas

1 Answers1