如何将数组映射到HTML网格？

debugcn 发表于 Dev

安德鲁·威廉姆森

我有一个数组，正在映射到图像源中以形成图像库。目前，它向下映射一列。我不确定如何使其填充其他列。任何提示将不胜感激！

这是电流输出

旨在拥有-

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

伊姆兰·拉菲克（Imran Rafiq Rather）

原因很简单。您的display:grid属性仅应用于SRLWrapper组件。

您需要className="image-grid"在SRLWrapper组件的父元素中设置set ，然后它将起作用:)

SRLWrapper.js文件返回一些JSX。您现在所拥有的只是您的网格容器的一个网格项目。这就是为什么即使您为网格容器设置了3列，也只SRLWrapper显示了一个子元素。

一招：始终使用开发人员控制台 (Ctrl+Shift+I)调试这些方案，因为我们在那里得到了实际的图片。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。