title: Is a large number of grid columns/rows a performance concern?
body: <p>There is a grid with many small rows and columns, something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/jclbV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jclbV.png" alt="enter image description here"></a></p>
  
  <p>Items will be placed inside it, for example:</p>
  
  <p><a href="https://i.stack.imgur.com/RuuYZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RuuYZ.png" alt="enter image description here"></a></p>
  
  <p>Grid is created with something like:</p>
  
  <pre><code>grid-template-rows: repeat(auto-fill, 10px);
  grid-template-columns: repeat(auto-fill, 10px);
  </code></pre>
  
  <ul>
  <li>Width of the grid can be as wide as browser window, say 2000px.</li>
  <li>Height can be a multiple screens, say 10000px.</li>
  <li>Tracks are not visible to the user, above images are just to demonstrate how CSS Grid layout looks.</li>
  <li>There can be hundreds of "items" (grey areas on above image), each occupying some number of cells (it can be 1x1 item, and it can be 60x40 item)</li>
  </ul>
  
  <p><strong>Questions</strong></p>
  
  <ul>
  <li>Is this a performance concern? Is it expensive for browsers to generate grid with a few hundred columns and a few thousand rows?</li>
  <li>If yes, is there a way to optimize <code>repeat(auto-fill, 10px)</code>? Maybe  percentages should be used instead (<code>repeat(auto-fill, 1%))</code>, or something instead of <code>auto-fill</code>?</li>
  </ul>
  
  <p>Or it's better doing this via JavaScript (height to container, left/top to items)?</p>