时间戳

首页 > 解决方案 > 使用 grid-template-areas 时 CSS Grid 属性值无效

html - 使用 grid-template-areas 时 CSS Grid 属性值无效

问题描述

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

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

内容只是被放置在左侧的第 3 个网格项中，而它应该位于第 4 个。

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

标签： htmlcsscss-grid

解决方案

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

推荐阅读