即使我从w3.org复制示例,HTML5 Css3网格布局也不起作用

Question

将不胜感激任何帮助尝试让css3/html网格布局工作.我在IE,Chrome和Edge中尝试了以下代码,但无法使其工作.也许有一些我忽略的东西.

#grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
}
#title {
  grid-column: 1;
  grid-row: 1;
}
#score {
  grid-column: 1;
  grid-row: 3;
}
#stats {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}
#board {
  grid-column: 2;
  grid-row: 1 / span 2;
}
#controls {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
}

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

Answer 1

截至2016年7月5日,网格实施在任何浏览器中都没有广泛(或几乎没有).

您可以在以下位置启用它:

• Firefox的; 随着设置 - layout.css.grid.enabled
• Webkit 每晚 ; 带前缀 - -webkit-
• IE /边缘; 带前缀 - -ms-
• 铬; 随着experimental Web Platform features国旗chrome://flags

请注意,Firefox/Chrome选项仅为您启用此选项,并且无法强制用户启用这些设置,因此这仅用于实验目的.