通过动态 CSS Grid 图像库映射答案

【问题标题】：Map through dynamic CSS Grid image gallery通过动态 CSS Grid 图像库映射
【发布时间】：2019-08-05 09:51:26
【问题描述】：

我正在尝试通过我的 Gatsby 项目中的图像文件夹映射数组，同时相应地在 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>
          )}

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

【问题讨论】：

类似codepen.io/anon/pen/ywvXpG ?
就是这样！但是因为我想通过我的所有图像映射数组（我不知道当我完成项目时会有多少）我不知道如何为每个正在渲染的图像元素设置网格区域. @fcalderan

标签： html reactjs css css-grid

【解决方案1】：

您已经在使用gridTemplateColumns 在网格中定义您的列 - 所以您可以完全省略gridTemplateAreas。请参见下文，了解此时您的代码如何简化为原生 CSS：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  border: 1px solid red;
}

img {
  border: 1px solid red;
}

h1 {
  border: 1px solid red;
}

<div class="wrapper">
  <img src="https://via.placeholder.com/400" />
  <h1>B</h1>
  <img src="https://via.placeholder.com/400" />
  <h1>B</h1>
  <img src="https://via.placeholder.com/400" />
  <h1>B</h1>
  <img src="https://via.placeholder.com/400" />
  <h1>B</h1>
</div>

现在要获得您的布局，您可以使用如下所示的 4 x 2 布局，前两张图片使用 grid-template-columns: repeat(4, 1fr) 和 grid-column: span 2：

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
  border: 1px solid red;
}

.wrapper img:first-child,
.wrapper img:nth-child(2) {
  grid-column: span 2;
}

img {
  border: 1px solid red;
  width: 100%;
  grid-column: span 1;
}

h1 {
  border: 1px solid red;
}

<div class="wrapper">
  <img src="https://via.placeholder.com/200" />
  <img src="https://via.placeholder.com/200" />
  <img src="https://via.placeholder.com/200" />
  <img src="https://via.placeholder.com/200" />
  <img src="https://via.placeholder.com/200" />
  <img src="https://via.placeholder.com/200" />
</div>

对于jsx，您可以使用如下内容：

render={data => (
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gridGap: "15px",
            border: "1px solid red",
          }}
        >
          {data.source.edges.map(({ node }, i) => (
            <>
              <Image
                style={{ width: "100%", border: "1px solid red", gridColumn: i < 2 ? 'span 2':'span 1'}}
                key={i}
                fluid={node.childImageSharp.fluid}
              />
            </>
          ))}
        </div>
      )}

【讨论】：