HTML5 Css3 Grid Layout Not Working Even When I Copy an Example from w3.org

Question

Would appreciate any help trying to get css3/html grid layout to work. I have tried the below code in IE, chrome, and Edge, and can't get it to work. Maybe there is something I have overlooked.

#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

The Grid implementation(s) are not widely (or hardly at all) available in any browser as of July 5, 2016.

You can enable it in:

• Firefox; with the setting - layout.css.grid.enabled
• Webkit nightly; with the prefix - -webkit-
• IE/Edge; with the prefix - -ms-
• Chrome; with the experimental Web Platform features flag in chrome://flags

Note that the Firefox/Chrome options only enable this for you, and there's no way to force a user to enable these settings, so this would be for experimentation purposes only.