为什么网格项目堆放在角落里？

Question

我创建了一个网格。然而，由于某种原因，所有的网格项目都堆叠在右下角，没有任何高度或宽度，而不是假定已分配给它们的 grid-area 属性的值。

当然我还没有给网格项指定高度或宽度，但它们不是假设了相应网格区域的宽度和高度吗？

我相当确定我已经按照 Mozilla guide 到了 T。不确定我哪里错了。任何帮助将不胜感激！

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #0d0d0d;
}

#layout-grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas:
    c c c c a a a a
    p p p p i i i i
    p p p p i i i i
    p p p p i i i i
    p p p p i i i i
    p p p p o o o o
    p p p p o o o o
  ;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 2%;
  
box-sizing:border-box;
border:solid skyblue 3px;
}

  #calender-navigation {
    grid-area: c;
  border:solid limegreen 3px;
  background:limegreen;
  }

  #account-summary {
    grid-area: a;
  border:solid orange 3px;
  background:orange;
  }

  #performance {
    grid-area: p;
  border:solid grey 3px;
  background:grey;
  }

  #user-input {
    grid-area: i;
  border:solid blue 3px;
  background:blue;
  }

  #positions {
    grid-area: o;
  border:solid red 3px;
  background:red;
  }

<div id="layout-grid">
  <div id="calender-navigation"></div>
  <div id="account-summary"></div>
  <div id="performance"></div>
  <div id="user-input"></div>
  <div id="positions"></div>
</div>

Answer 1

您需要将“”与 grid-template-areas 的值一起使用，因为在您的情况下它是一个 string 值：

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #0d0d0d;
}

#layout-grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas:
    "c c c c a a a a"
    "p p p p i i i i"
    "p p p p i i i i"
    "p p p p i i i i"
    "p p p p i i i i"
    "p p p p o o o o"
    "p p p p o o o o"
  ;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 2%;
  
box-sizing:border-box;
border:solid skyblue 3px;
}

  #calender-navigation {
    grid-area: c;
  border:solid limegreen 3px;
  background:limegreen;
  }

  #account-summary {
    grid-area: a;
  border:solid orange 3px;
  background:orange;
  }

  #performance {
    grid-area: p;
  border:solid grey 3px;
  background:grey;
  }

  #user-input {
    grid-area: i;
  border:solid blue 3px;
  background:blue;
  }

  #positions {
    grid-area: o;
  border:solid red 3px;
  background:red;
  }

<div id="layout-grid">
  <div id="calender-navigation"></div>
  <div id="account-summary"></div>
  <div id="performance"></div>
  <div id="user-input"></div>
  <div id="positions"></div>
</div>

为什么网格项目堆放在角落里？

Why are grid items stacked in corner?

html

css

css-grid