使用grid-template-areas时CSS Grid无效的属性值[重复]答案

【问题标题】：CSS Grid Invalid Property Value when using grid-template-areas [duplicate]使用grid-template-areas时CSS Grid无效的属性值[重复]
【发布时间】：2020-08-27 18:56:30
【问题描述】：

这可能很明显，但我已经坚持了一段时间并且搜索了stackoverflow无济于事。

在我有一个网格区域值的任何地方，当我查看元素时，我都会在谷歌浏览器中得到“无效的属性值”。

内容只是被放置在左侧的第三个网格项中，而它应该在第四个。

.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>

【问题讨论】：

我建议将您的代码放在可运行的 sn-p 中，以使响应者更容易；-)
grid-area 中的值不能用双引号 (") 括起来。
谢谢我下次会这样做！感谢您的回答，我知道这很明显。我一直盯着它看太久了，根本看不到引号。

标签： html css css-grid

【解决方案1】：

你应该有不带引号的属性值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>

【讨论】：