title: How can I map an array into an HTML grid?
body: <p>I have an array I'm mapping into image sources to form an image gallery. At the moment it maps down one column. I'm unsure how to make it fill the other columns. Any tips would be much appreciated!</p>
  <p>This is current output</p>
  <p><a href="https://i.stack.imgur.com/YrTQE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YrTQE.png" alt="enter image description here" /></a></p>
  <p>Aiming to have -</p>
  <pre><code>[123]
  </code></pre>
  <p>Code -</p>
  <pre><code>&lt;div className=&quot;image-grid&quot;&gt;
         &lt;SRLWrapper options={options}&gt;
                          {data.home.galleryImage.map((image, index, caption) =&gt; (
                                &lt;div className=&quot;image-item&quot; key={`${index}-cl`}&gt;
                                 &lt;img src={`http:XXX${image.url}`} alt=&quot;&quot; class=&quot;galleryimg&quot;/&gt;
                                 &lt;div class=&quot;imgoverlay&quot;&gt;
                                  &lt;div class=&quot;imgtext&quot;&gt;zoomie&lt;/div&gt;
                                &lt;/div&gt;
                                &lt;/div&gt;
                          ))  
                          }
        &lt;/SRLWrapper&gt;
  &lt;/div&gt;
  </code></pre>
  <p>css -</p>
  <pre><code>.image-grid {  
      display: grid;
      grid-template-columns: repeat(3, minmax(100px, 1fr));
      column-gap: 2rem;
    }
  
    .image-item {
      position: relative;
      width: 100%;
      display: block;
      margin-bottom: 2rem;
      
    }
  </code></pre>