title: A way to count columns in a responsive grid
body: <p>Although I have not yet been able to find an answer, the question is simple: <strong>Is there a way,</strong> <strong><em>other than brute force,</em></strong> <strong>to count the number of columns in a responsive grid?</strong></p>
  
  <pre><code>#grid-container {
    width: 100%;
    height: 85%;
    position: relative;
    padding: var(--gap); /* adjusted with JS to make var(--gap) responsive */
    display: grid;
    grid-gap: var(--gap); /* adjusted with JS to make var(--gap) responsive */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    box-sizing: border-box;
    background: skyblue;
  }
  
  .grid-item {
    width: 100%;
    min-width: 120px;
    max-width: 450px;
    height: ; /* adjusted with JS on resize events to roughly maintain proportions */
    min-height: 192px;
    border-radius: 10px;
    background: #333;
  }
  </code></pre>
  
  <p>The reason I ask is because I have given the grid items a <code>max-width</code> that causes a massive gap at the very last breakpoint, which I would like to be able to detect instead of setting an explicit media query.</p>
  
  <p><a href="https://i.stack.imgur.com/qCGUI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qCGUI.png" alt="enter image description here"></a></p>