Grid

by AJIEKCEU

HTML

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

CSS

#title, #score, #stats, #board, #controls {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 80px;
    border: 1px solid #eebb55;
    border-radius: 7pt;
    background: #ffeebb;
} 

/* The grid-area property places a grid item into a named 
   * region (area) of the grid. */
  #title    { grid-area: title }
  #score    { grid-area: score }
  #stats    { grid-area: stats }
  #board    { grid-area: board }
  #controls { grid-area: ctrls }

  
#grid {
      display: grid;
      display: -ms-grid;
      /* Again the template property defines areas of the same name, 
       * but this time positioned differently to better suit a 
       * landscape orientation. */
      grid-template: "board title"
                     "board stats"
                     "score ctrls";


    }

JavaScript

// http://dev.w3.org/csswg/css-grid/