title: Responsive CSS dot-grid background
body: <p>I'm wondering if the following is possible:</p>
  
  <p><strong>A dot-grid as a CSS background, where the column widths are responsive but the dots always stay the same pixel size.</strong></p>
  
  <p>I've achieved the effect with <code>linear-gradient</code> patterns but these do not align with flexbox grids at certain viewport widths – likely due to the pixel rounding using calc() and vw units.</p>
  
  <p><a href="https://codepen.io/evvvritt/pen/WdJxbx" rel="nofollow noreferrer">linear-gradient (Codepen)</a></p>
  
  <p>I'm currently looking into using <code>&lt;svg&gt;</code> but the problem I'm facing is when the SVG scales, so do the dots (dots should remain the same pixel size as it scales).</p>
  
  <p>I'm worried I may have to resort to HTML elements for the grid and dots :(</p>