title: Responsive image grid that takes full remaining viewport space, horizontally and vertically
body: <p>I am not well versed in responsive design and I can't seem to find solution for required objective.  Here's a mock-up of the layout I want:</p>
  
  <p><img src="https://i.stack.imgur.com/tRdiD.png" alt="enter image description here"></p>
  
  <p>Now, the goal is to have images, without gap, fit in the image-grid container. This container should take full remaining space, to the utmost right and bottom of a browser viewport, but it does not exceed it, so we don't have any scroll-bars. All images are of <em>identical dimensions</em>.</p>
  
  <p>Row-column distribution would depend on viewport size and image dimension to prevent unnecessary distortions. This ratio would change when the viewport size hits specific break-point, but in-between break-points, images would fine tune by proportional scaling.</p>
  
  <p>Break-points are managed with media queries and the site has to be mobile friendly, also. I can't use <em>'vh'</em> solution for that matter.  </p>
  
  <p>I am primarily looking for lightest implementation, so pure CSS solution would be ideal. I've heard about Masonry JS library and derivative library <a href="http://isotope.metafizzy.co/" rel="nofollow noreferrer">Isotope</a>, but I didn't have an opportunity to play with it, yet.</p>
  
  <p>Any help on the subject will be greatly appreciated.</p>