Search code examples
javascriptcssreactjscss-grid

How can I map an array into an HTML grid?

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!

This is current output

enter image description here

Aiming to have -

[123]

Code -

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

  • The reason is simple. Your display:grid property is only applied on SRLWrapper component.

    You need to set the set the className="image-grid" in the parent element of your SRLWrapper component and then it will work :)

    SRLWrapper.js file returns some JSX. What you have right now is only one grid-item for your grid-container. That's why even though you have set your 3-columns for your grid container, there is only one child element SRLWrapper to show.

    One Trick: Always always use Developer Console (Ctrl+Shift+I) to debug these scenarios because we get the actual picture there.