title: How to fill out the last row with fake items in a responsive flexbox grid layout?
body: <p>We have the typical responsive flexbox grid with fixed-width elements, and a dynamic number of rows, based on screen resolution and the number of items. For example, say we have seven <code>&lt;div&gt;</code>s, it will show something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9fXXq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9fXXq.png" alt="enter image description here"></a></p>
  
  <p>We need to complete the last row with "fake" items, or placeholders, with no extra HTML:</p>
  
  <p><a href="https://i.stack.imgur.com/DJ4Sy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DJ4Sy.png" alt="enter image description here"></a></p>
  
  <p>And, if we change the resolution, it should recalculate the needed placeholders:</p>
  
  <p><a href="https://i.stack.imgur.com/CjnlP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CjnlP.png" alt="enter image description here"></a></p>
  
  <p>Is this even possible with just plain CSS?</p>
  
  <p>We're using flexbox, but we're open to using CSS Grid layout if it solves our problem.</p>