title: Arrange divs as a grid
body: <p>I got the current code to display a grid of recipes</p>
  
  <pre><code>&lt;div class="mt-40"&gt;
      &lt;div class="recipe-cont cont mt-15 rounded left mr-15 mb-15"&gt;
          &lt;img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5"&gt;
      &lt;/div&gt;
      &lt;div class="recipe-cont cont mt-15 rounded left mr-15 mb-15"&gt;
          &lt;img src="data/2014121602/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5"&gt;
      &lt;/div&gt;
      &lt;div class="recipe-cont cont mt-15 rounded left mr-15 mb-15"&gt;
          &lt;img src="data/2014121603/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5"&gt;
      &lt;/div&gt;
      &lt;div class="recipe-cont cont mt-15 rounded left mr-15 mb-15 "&gt;
          &lt;img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5"&gt;
      &lt;/div&gt;
      &lt;div class="recipe-cont cont mt-15 rounded left mr-15 mb-15 "&gt;
          &lt;img src="data/2014121602/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5"&gt;
      &lt;/div&gt;
      &lt;div class="recipe-cont cont mt-15 rounded left mr-15 mb-15"&gt;
          &lt;img src="data/2014121603/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5"&gt;
      &lt;/div&gt;
      &lt;div class="recipe-cont cont mt-15 rounded left mr-15 mb-15"&gt;
          &lt;img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.  </p>
  
  <pre><code>.recipe-cont {
      width: 180px;
      height: 210px;
  }
  </code></pre>
  
  <p>The output looks like this:
  <img src="https://i.stack.imgur.com/snq94.png" alt="enter image description here"></p>
  
  <p>What I'm trying to achieve is this:
  <img src="https://i.stack.imgur.com/1yDIk.png" alt="enter image description here"></p>
  
  <p>The reason it's not working as I want is because I've set <strong>margin-right: 15px</strong>.<br>
  I want to easily add new recipes to the list by inserting a new div, so removing the margin on the 5th div will solve the problem temporarily, but it will get problematic when I insert more recipes as it's pushed down one to a new line.</p>
  
  <pre><code>mr-15 = margin-right: 15px  
  mb-15 = margin-bottom: 15px
  </code></pre>
  
  <p>Help really appreciated!  </p>