CSS网格布局什么都不做

Question

当此代码显示在Google Chrome中时，显示的唯一格式是颜色。每个<div>只是按照html代码中列出的顺序堆叠在一起。 How it's shown in Chrome

#grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
}

#title {
  grid-column: 1;
  grid-row: 1;
  background-color: blue;
}

#score {
  grid-column: 1;
  grid-row: 3;
  background-color: gray;
}

#stats {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  background-color: fuchsia;
}

#board {
  grid-column: 2;
  grid-row: 1 / span 2;
  background-color: green;
}

#controls {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  background-color: red;
}

<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls and more controls</div>
</div>

Answer 1

感谢回复，我没有在我的CSS中添加html或body元素。添加这些元素后，格式化了。再次感谢。