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

Question

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

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

我很确定我已经跟着https://127.0.0.1/?code=AQQyB2NCpL5iE_wyOqmqTm5z......iKhx#到了T.不知道我在哪里错了。任何帮助将不胜感激！

Mozilla guide

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

你需要使用＆＃34; ＆＃34;值为grid-template-areas，因为它是您的字符串值：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;