Html 通过动态CSS网格图像库映射

我试图通过盖茨比项目中的一个图像文件夹映射数组，同时在CSS网格库中相应地显示它们：

如果我把所有元素都写在后面，我可以很容易地做到这一点，但是当我在图像中映射时，我似乎无法为每个元素设置一个特定的网格模板区域。见下面的代码：

render={data => (
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gridTemplateAreas: "'a b'",
                gridGap: "15px",
                border: "1px solid red",
              }}
            >
              {data.source.edges.map(({ node }, i) => (
                <>
                  <Image
                    style={{ gridArea: "a", border: "1px solid red" }}
                    key={i}
                    fluid={node.childImageSharp.fluid}
                  />
                  <h1 style={{ gridArea: "b", border: "1px solid red" }}>B</h1>
                </>
              ))}
            </div>
          )}

render={data=>(
{data.source.edges.map（{node}，i）=>(
B
))}
)}

---

如何映射图像并将其显示为上图，只有前两个图像占据50%的网格，所有其他行和图像占据25%的网格？

您已经在使用

gridTemplateColumns

定义网格中的列-因此您可以完全忽略

gridTemplateAreas

。请参见下文，了解您的代码此时如何简化为普通CSS：

.wrapper{
显示：网格；
网格模板柱：1fr 1fr；
栅极间隙：15px；
边框：1px纯红；
}
img{
边框：1px纯红；
}
h1{
边框：1px纯红；
}

B
B
B
B

类似的东西？完全一样！但由于我想通过我所有的图像映射数组（我不知道完成项目后会有多少个），我不知道如何为正在渲染的每个图像元素设置网格区域@弗卡德兰