title: Count how many elements in dynamic row
body: <p>When using <a href="https://youtu.be/FEnRpy9Xfes" rel="noreferrer">CSS Grid Layout</a> to dynamically arrange elements in rows the browser calculates how many items go in a row depending on the size of the viewport. I'm looking for a way using JavaScript to determine how many items are in each row at a given viewport size. My purpose is to fill the inevitable part empty row at the end.</p>
  
  <p>For example, given the CSS and HTML listed below, and at a particular viewport size results in this layout:</p>
  
  <p><a href="https://i.stack.imgur.com/lQfIg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lQfIg.png" alt="CSS Grid Layout Narrow, Dynamic Rows, Part Empty Last Row"></a></p>
  
  <p>And at a wider viewport results in this layout:</p>
  
  <p><a href="https://i.stack.imgur.com/iLyoS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iLyoS.png" alt="CSS Grid Layout Wide, Dynamic Rows, Part Empty Last Row"></a></p>
  
  <p>Each have missing elements in the last row.</p>
  
  <p>I'm looking for a way to determine how many elements are in a row. With that information I can then dynamically load more elements to fill in the last row so it's the same number as the rest.</p>
  
  <hr>
  
  <p>Example CSS and HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
  
  * {
    box-sizing: border-box;
  }
  body {
    padding: 1rem;
  }
  
  main {
    max-width: 500px;
    margin: 0 auto;
  }
  article {
    margin: 1rem 0;
    overflow: hidden;
  }
  
  main {
    max-width: 10000px;
    margin: 0;
  }
  article {
    margin: 0;
  }
  .listings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
  }
  
  .listings {
    font-family: Avenir, Roboto, Helvetica, san-serif;
    font-size: 80%;
  }
  .listing {
    display: flex;
    flex-flow: column;
    border: 1px solid silver;
  }
  .listing &gt; h1 {
    margin: 1rem 1rem 0;
  }
  .listing &gt; div {
    margin: 0.25em 1rem 1rem;
  }
  .listing &gt; img {
    width: auto;
    max-height: 200px;
    order: -1;
    align-self: center;
  }
  
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main class="listings"&gt;
   &lt;article class="listing"&gt;
    &lt;img src="images/computer.jpg"&gt;
    &lt;h1&gt;87,500&lt;/h1&gt;
    &lt;div&gt;1008[3/2]0&lt;/div&gt;
   &lt;/article&gt;
  
   &lt;article class="listing"&gt;
    &lt;img src="images/computer.jpg"&gt;
    &lt;h1&gt;30,000&lt;/h1&gt;
    &lt;div&gt;952[2/1]0&lt;/div&gt;
   &lt;/article&gt;
  
   &lt;article class="listing"&gt;
    &lt;img src="images/computer.jpg"&gt;
    &lt;h1&gt;70,000&lt;/h1&gt;
    &lt;div&gt;1090[3/1]0&lt;/div&gt;
   &lt;/article&gt;
  
   &lt;article class="listing"&gt;
    &lt;img src="images/computer.jpg"&gt;
    &lt;h1&gt;11,000&lt;/h1&gt;
    &lt;div&gt;828[2/1]2&lt;/div&gt;
   &lt;/article&gt;
  
   &lt;article class="listing"&gt;
    &lt;img src="images/computer.jpg"&gt;
    &lt;h1&gt;25,000&lt;/h1&gt;
    &lt;div&gt;1484[2/1]0&lt;/div&gt;
   &lt;/article&gt;
  
   &lt;article class="listing"&gt;
    &lt;img src="images/computer.jpg"&gt;
    &lt;h1&gt;199,000&lt;/h1&gt;
    &lt;div&gt;2160[3/2]0&lt;/div&gt;
   &lt;/article&gt;
  
   &lt;article class="listing"&gt;
    &lt;img src="images/computer.jpg"&gt;
    &lt;h1&gt;42,000&lt;/h1&gt;
    &lt;div&gt;1509[3/2]0&lt;/div&gt;
   &lt;/article&gt;
  
   &lt;article class="listing"&gt;
    &lt;img src="images/computer.jpg"&gt;
    &lt;h1&gt;230,000&lt;/h1&gt;
    &lt;div&gt;1885[3/2]0&lt;/div&gt;
   &lt;/article&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>