title: css responsive grid - horizontal line between rows
body: <p>I have a responsive layout with a grid of content blocks.</p>
  
  <p>on desktop each row is 4 blocks</p>
  
  <p>on tablet each row is 3 blocks</p>
  
  <p>on phone each row is 2 blocks</p>
  
  <p>I want a horizontal line to run between each row of blocks on all sizes. At the moment I have a border bottom on each block but the line doesn't extend the full width of the page if you have an empty space (eg 3 blocks on a 4 column grid)</p>
  
  <p>The only way I can think of doing it is to wrap each row in a container using JS and reload that function on each screen resize.</p>
  
  <p>Anyone know of a CSS solution?</p>
  
  <p>This image should demonstrate what I'm trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/Kf8vR.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kf8vR.gif" alt="enter image description here"></a></p>