title: Order and distribution SVG objects in all screen at load time with JavaScript
body: <p>I was trying to figure out the way to do the following: I have X number of SVG files that a page loads, and I have to distribute them over the entire screen, no matter what size the screen is, but the elements has to have the same size.</p>
  <p>For example, if a single element loads in the page, it should be displayed occupying most of the available screen space as follows:</p>
  <p><a href="https://i.stack.imgur.com/SMuRA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SMuRA.png" alt="enter image description here" /></a></p>
  <p>But, if a second element is added into the list, the screen should show them as follows:</p>
  <p><a href="https://i.stack.imgur.com/WRRW0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WRRW0.png" alt="enter image description here" /></a></p>
  <p>But avoid this kind of layout for a single element:</p>
  <p><a href="https://i.stack.imgur.com/qwoUs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qwoUs.png" alt="enter image description here" /></a></p>
  <p>And so on, I need to continue with that distribution, respecting the requirements mentioned above</p>
  <p><a href="https://i.stack.imgur.com/cbrYY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cbrYY.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/oQ3Im.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oQ3Im.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/AcpmC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AcpmC.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/LKVZH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LKVZH.png" alt="enter image description here" /></a></p>
  <p>Anyone have any idea of how can this be achieved?
  Thanks in advance.</p>