Grid Layout is the method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors

Browser Support

Sadly this feature is currently not supported by any browser.

Code Example

You can use Grid Layout like this:

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

#grid {
  display: grid;
 
  /* Two columns: the first sized to content, the second receives
   * the remaining space, but is never smaller than the minimum
   * size of the board or the game controls, which occupy this
   * column. */
  grid-template-columns: auto minmax(min-content, 1fr);
 
  /* Three rows: the first and last sized to content, the middle
   * row receives the remaining space, but is never smaller than
   * the minimum height of the board or stats areas. */
  grid-template-rows: auto minmax(min-content, 1fr) auto
}
 
/* Each part of the game is positioned between grid lines by
 * referencing the starting grid line and then specifying, if more
 * than one, the number of rows or columns spanned to determine
 * the ending grid line, which establishes bounds for the part. */
#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 }

More Information

More information can be found here.