CSS网格布局无效

时间:2017-12-29 10:42:19

标签: html css browser

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

&#13;
&#13;
#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;
}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

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