title: CSS Flexbox - spacing between elements when using flex wrap and flex grow properties
body: <p>I am using CSS flexbox for grid based navigation which has 3 columns in row and 'n' no of rows in the grid. The width of the grid-child calculated based on the parent container width (i.e. 100%).</p>
  
  <p>I set <code>margin-right:10px;</code> and <code>margin-bottom:10px;</code> for each 3rd of the grid-child i had set <code>0px</code> for <code>margin-right</code>to force the grid-child at the right edge of the parent container. </p>
  
  <p>Everything works fine if a the column equally divided by 3. (i.e. 3 columns per row). </p>
  
  <p>Here the problem is, if last row has only 2 columns then we have <code>10px</code> space between grid and the grid-child.</p>
  
  <p>Is there any possible solution to get rid of the remaining space.</p>
  
  <p>Please find the below codepen link for better understanding:
  <a href="https://codepen.io/yesvin/pen/xXwBqa" rel="nofollow noreferrer">https://codepen.io/yesvin/pen/xXwBqa</a> </p>
  
  <p><strong>HTML code block:</strong></p>
  
  <pre><code>&lt;div class="menu-wrapper"&gt;  
      &lt;div class="menu"&gt;
        &lt;div class="menu-icon"&gt;
          &lt;img src="http://via.placeholder.com/80x80"/&gt;
        &lt;/div&gt;
        &lt;div class="menu-name"&gt;
          &lt;p&gt;Txt&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menu"&gt;
        &lt;div class="menu-icon"&gt;
          &lt;img src="http://via.placeholder.com/80x80"/&gt;
        &lt;/div&gt;
        &lt;div class="menu-name"&gt;
          &lt;p&gt;Txt&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menu"&gt;
        &lt;div class="menu-icon"&gt;
          &lt;img src="http://via.placeholder.com/80x80"/&gt;
        &lt;/div&gt;
        &lt;div class="menu-name"&gt;
          &lt;p&gt;Txt&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menu"&gt;
        &lt;div class="menu-icon"&gt;
          &lt;img src="http://via.placeholder.com/80x80"/&gt;
        &lt;/div&gt;
        &lt;div class="menu-name"&gt;
          &lt;p&gt;Txt&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menu"&gt;
        &lt;div class="menu-icon"&gt;
          &lt;img src="http://via.placeholder.com/80x80"/&gt;
        &lt;/div&gt;
        &lt;div class="menu-name"&gt;
          &lt;p&gt;Txt&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menu"&gt;
        &lt;div class="menu-icon"&gt;
          &lt;img src="http://via.placeholder.com/80x80"/&gt;
        &lt;/div&gt;
        &lt;div class="menu-name"&gt;
         &lt;p&gt;Txt&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menu"&gt;
        &lt;div class="menu-icon"&gt;
          &lt;img src="http://via.placeholder.com/80x80"/&gt;
        &lt;/div&gt;
        &lt;div class="menu-name"&gt;
          &lt;p&gt;Txt&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menu"&gt;
        &lt;div class="menu-icon"&gt;
          &lt;img src="http://via.placeholder.com/80x80"/&gt;
        &lt;/div&gt;
        &lt;div class="menu-name"&gt;
          &lt;p&gt;Txt&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS code block:</strong></p>
  
  <pre><code>.menu-wrapper {
    width:100%;
    height:100%;
    display: flex;    
    flex-wrap:wrap;
    margin:0px; 
  
    .menu {
      display: inline-block;
      border:solid 1px #ccc;
      margin:0 10px 10px 0;    
      flex-grow: 1;      
      width: calc(33% - 10px);
    }
    .menu:nth-child(3n) {
      margin-right:0;
    }
    .menu-icon {
      text-align:center;
    }
    .menu-name {
      width:80%;
      margin:0 auto;
      text-align:center;
    }
  }
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/VU8jo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VU8jo.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Required result</strong></p>
  
  <p><a href="https://i.stack.imgur.com/wOql6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wOql6.jpg" alt="enter image description here"></a></p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>NOTE:
  It is possible to achieve the similar effect by split the each row in a separate flexbox styling. But, I don't want that, because, the 'n' no. of menus are dynamically appending inside the menu-wrapper.</strong></p>