title: Vertical and horizontal centered 4x4 square grid using css grid
body: <p>I want to write 2048 game using divs and css-grid. This is how I imagine the output:
  <a href="https://i.stack.imgur.com/SEePR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SEePR.png" alt="enter image description here"></a></p>
  
  <p>I have the outer part, which fits to the browser window, and I just want to write 4x4 grid in the middle (horizontal and vertical) of the middle-left div (called <code>game-container</code>)</p>
  
  <pre><code>&lt;div class = "game-container"&gt;
    &lt;div class = "game"&gt;
      &lt;div class = "game-cell"&gt;&lt;/div&gt;
      &lt;!-- 16 game cells total --&gt;
      &lt;div class = "game-cell"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I made a 4x4 grid using:</p>
  
  <pre><code>div.game {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  </code></pre>
  
  <p>However, I have a problem with few things:</p>
  
  <ul>
  <li>How to make each <code>game-cell</code> square (lets say 50px)</li>
  <li>How to display a number in the middle of a <code>game-cell</code></li>
  <li>How to make divs touch each other</li>
  </ul>
  
  <p>I can make each one of this, but not all at once.</p>
  
  <p>Moreover, how to display <code>game</code> div in the middle (as in the picture) of the <code>game-container</code> div.</p>
  
  <p>PS. I don't mind using some Bootstrap if it simplifies something.</p>
  
  <hr>
  
  <p>Some info concerning outer container:</p>
  
  <pre><code>html, body, div.container{
      height: 100%;
      margin: 0;
      padding: 0;
  }
  
  div.container {
    display:grid;
    grid-template-rows: 3fr 9fr 2fr;
    grid-template-columns: 3fr 5fr;
    grid-gap: 2px;
    background-color: yellow;
  }
  </code></pre>