Как я могу сопоставить массив с сеткой HTML?

У меня есть массив, который я сопоставляю с источниками изображений, чтобы сформировать галерею изображений. На данный момент он отображает один столбец вниз. Я не уверен, как заставить его заполнить другие столбцы. Любые советы будут высоко оценены!

Это текущий выход

Стремление иметь -

[123]

Код -

<div className = "image-grid">
       <SRLWrapper options = {options}>
                        {data.home.galleryImage.map((image, index, caption) => (
                              <div className = "image-item" key = {`${index}-cl`}>
                               <img src = {`http:XXX${image.url}`} alt = "" class = "galleryimg"/>
                               <div class = "imgoverlay">
                                <div class = "imgtext">zoomie</div>
                              </div>
                              </div>
                        ))  
                        }
      </SRLWrapper>
</div>

css-

.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;
    
  }