HTML5 Css3 Grid Layout does not work even when copying an example from w3.org

Question

Would thank for any help trying to get css3 / html grid layout to work. I have tried the code below in IE, chrome and Edge and cannot make it work. Maybe I missed something.

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

Run codeHide result

Answer 1

The implementation (s) of the Grid has not been widely (or almost not available) in any browser since July 5, 2016.

You can include it in:

• Firefox with setting -layout.css.grid.enabled
• Webkit nightly ; prefixed with --webkit-
• IE / Edge; prefixed with --ms-
• Chrome with flag experimental Web Platform featuresinchrome://flags

, Firefox/Chrome , , .