title: Rendering n number of grid items based in the dynamic column size
body: <p>I have a slider that ranges <strong>from 1 and up to 3</strong>. The slider's on change event sets the value of a CSS variable (e.g. <code>:root { --colNum: 1 }</code> ) so I am able to dynamically change the number of grid columns.</p>
  <p>What I am trying to achieve is (let's say I have <strong>six images in total</strong>):</p>
  <ul>
  <li>When I have <strong>one column</strong> set, I would like to display only <strong>the first image, full size</strong> and <strong>hide the five remaining images</strong>.</li>
  <li>When I have <strong>two columns</strong> set, I would like to display the <strong>first four images</strong>, <strong>two in each row</strong> and <strong>hide the two remaining images</strong>.</li>
  <li>When I have <strong>three columns</strong> set, I would like to display <strong>all the six images, three per row.</strong></li>
  </ul>
  <p>Similar to the following images:</p>
  <ul>
  <li><strong>1 column and 1 image (1 row)</strong> <a href="https://i.stack.imgur.com/0DIzMt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0DIzMt.png" alt="1 column" /></a></li>
  <li><strong>2 columns and 4 images (2 rows)</strong> <a href="https://i.stack.imgur.com/x2Upgt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x2Upgt.png" alt="2 columns" /></a></li>
  <li><strong>3 columns and 6 images (2 rows)</strong> <a href="https://i.stack.imgur.com/0QRDRt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0QRDRt.png" alt="3 columns" /></a></li>
  </ul>
  <p>I have created a <a href="https://stackblitz.com/edit/react-cjhy4w" rel="nofollow noreferrer">sandbox</a>, tried different examples but none of them fit my needs so I have left it in an &quot;initial state&quot;.</p>
  <p>I am not sure if I am overthinking that but I am open to hear any suggestions or even other approaches in how I could achieve that result.</p>
  <p>Thanks in advance.</p>