title: How do I make two rows of 7 columns/tiles in a row in CSS/bootstrap?
body: <p>I am trying to design a simple HTML game and the layout is comprises of two rows of 7 columns/tiles in a row, and one big column/tile on.</p>
  
  <p><a href="https://imgur.com/y7oooY1" rel="nofollow noreferrer"><img src="https://i.imgur.com/y7oooY1.jpg?1" title="source: imgur.com" /></a></p>
  
  <p>Or simple a simulation of this game <a href="http://www.fupa.com/play/BoardGame-free-games/mancala_v922346.html" rel="nofollow noreferrer">here</a>. 
  The middle tiles are 7 up and 7 down and a bigger tile to the left and right as is seen in the game.</p>
  
  <p>I use a css script like:</p>
  
  <pre><code>.grid-row {
      margin-bottom: 15px;
  }
  .grid-container {
  position: absolute;
  z-index: 1; }
  
  .grid-row:after {
      content: "";
      display: block;
      clear: both; }
  
  .grid-cell {
      width: 106.25px;
      height: 106.25px;
      margin-right: 15px;
      float: left;
      border-radius: 3px;
      background: rgba(238, 228, 218, 0.35); }
  </code></pre>
  
  <p>The above generate my tiles in a container as required like:</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="game-container"&gt;
              &lt;div class="grid-container"&gt;
                 &lt;div class="grid-row"&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="grid-row"&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                          &lt;div class="grid-cell"&gt;&lt;/div&gt;
                      &lt;/div&gt;
             &lt;/DIV&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I'm having difficulty generating the two big tiles. I thought of separating the rows into left, right and center columns like:</p>
  
  <pre><code>.column-left{ float: left; width: 10%; }
  .column-right{ float: right; width: 10%; }
  .column-center{ display: inline-block; width: 80%; }
  </code></pre>
  
  <p>And then adding my grid-row above into column-center class. Then creating to two column left and right above adding a single tile i called grid-mega-cell below:</p>
  
  <pre><code>.grid-cell {
          width: 106.25px;
          height: 212.50px;
          margin-right: 15px;
          float: left;
          border-radius: 3px;
          background: rgba(238, 228, 218, 0.35); }
  </code></pre>
  
  <p>The above still fails. I tried using bootstrap columns as well. Two big tiles in a <code>div.col-md.col-md-offset-1</code> and the middle tiles in <code>div.col-md-8</code>. All still fails.</p>