Grid

by girlie_mac

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 }

  @media (orientation: portrait) {
    #grid {
      display: -ms-grid;
      display: grid;

      /* The rows, columns and areas of the grid are defined visually
       * using the grid-template property.  Each string is a row, and
       * each word an area.  The number of words in a string 
       * determines the number of columns. Note the number of words 
       * in each string must be identical. */
      grid-template: "title stats"
                     "score stats"
                     "board board"
                     "ctrls ctrls";

      /* Columns and rows created with the template property can be 
       * assigned a sizing function with the grid-definition-columns 
       * and grid-definition-rows properties. */
      grid-definition-columns: auto minmax(min-content, 1fr);
      grid-definition-rows: auto auto minmax(min-content, 1fr) auto
    }
  }

  @media (orientation: landscape) {
    #grid {
      display: grid;

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

      grid-definition-columns: auto minmax(min-content, 1fr);
      grid-definition-rows: auto minmax(min-content, 1fr) auto
    }
  }

JavaScript

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