title: Make elements fill given space equally
body: <p>I would like to have layout of div elements that looks like below:</p>
  
  <p>If screen is large enough then there is many blocks in the single row. </p>
  
  <p>For example, I would like to have minimum width of each block set to 250px. </p>
  
  <p>So on large screens I can have the following for such elements. On the right is the map (closable), if user hide it then there will be 6 blocks in the row. </p>
  
  <p><a href="https://i.stack.imgur.com/Lh6xL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lh6xL.png" alt="large screen"></a></p>
  
  <p>Next when I shrink the browser window horizontally this all block doesn't fit in the row so they move to the next row. Ok this works now in that way that they go do second row, but they leave space between div blocks and the map. Like on the below image. </p>
  
  <p><a href="https://i.stack.imgur.com/NFCd4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NFCd4.png" alt="ramaining space between divs and map sidebar"></a></p>
  
  <p>I would like to have such layout where if 4 blocks doesn't fit the space then ok there is 3 blocks but they equally fill the remaining space (without this remaining yellow space). See pictures below. </p>
  
  <p><a href="https://i.stack.imgur.com/LVja3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LVja3.png" alt="3 blocks of divs per row"></a></p>
  
  <p>Then when browser windows shrinks more it should look like below</p>
  
  <p><a href="https://i.stack.imgur.com/XtB2C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XtB2C.png" alt="2 blocks of divs per row"></a></p>
  
  <p>And on mobile devices and very narrow browser windows: </p>
  
  <p><a href="https://i.stack.imgur.com/rvDJF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rvDJF.png" alt="1 block of div per row"></a></p>
  
  <p>Ok I could achieve something like this using such CSS style: </p>
  
  <pre><code>#parent {
      display: flex;
      flex-wrap: wrap;
  }
  
  .child {
      width: calc(33% - 15px);
      margin-left: 10px;
      margin-top: 10px;
      margin-bottom: 20px;  
      min-width: 250px;
  }
  </code></pre>
  
  <p>then I should manually change this using media queries: </p>
  
  <pre><code>calc(25% - 15px) //lg
  calc(33% - 15px) //md
  calc(50% - 15px) //sm
  calc(100% - 15px) //xs 
  </code></pre>
  
  <p>maybe even this when map disappears </p>
  
  <pre><code>calc(16.667% - 15px) //lg+no map
  </code></pre>
  
  <p>Ok FLEX isn't so backward-compatible so I could play even more and do something like this:</p>
  
  <pre><code>#parent {
  
  }
  
  .child {
      width: calc(33% - 15px);
      margin-left: 10px;
      margin-top: 10px;
      margin-bottom: 20px;  
      min-width: 250px;
      float: left; 
  }
  </code></pre>
  
  <p>then also change this width depending on screen size manually 
  and add <strong>clear: left</strong> after last element using </p>
  
  <pre><code>.block-offer:nth-last-child(1):after { 
      clear: left; 
  }
  </code></pre>
  
  <p>or before other elements make some other clearfix </p>
  
  <p>or even (<strong>is it necessery?</strong>)  add clear: left after each row using: </p>
  
  <pre><code>.block-offer:nth-child(4n+1) { 
     clear:left; 
  }
  .block-offer:nth-child(3n+1) { 
     clear:left; 
  }
  .block-offer:nth-child(2n+1) { 
     clear:left; 
  }
  .block-offer:nth-child(1n+1) { 
     clear:left; 
  }
  </code></pre>
  
  <p>like with this width: calc() depending on screen size and divs witdh </p>
  
  <p>But then I need to use many media queries and I would like to wrap this CSS in some angular 2+ component and have there only such things like: </p>
  
  <pre><code>&lt;blocks-container max-cols="6"&gt; 
      &lt;block min-width="250px"&gt;&lt;/block&gt; 
      &lt;block min-width="250px"&gt;&lt;/block&gt;
       ...
  &lt;/blocks-container&gt;
  </code></pre>
  
  <p>I think that using @media queries will improve a little this behaviour but my components will tightly coupled with screen size and I think there wasn't as generic as I would like them to be to flexibly specify max-cols and min-widths. </p>