gpt4 book ai didi

html - 通过动态 CSS Grid 图片库进行映射

转载 作者:搜寻专家 更新时间:2023-10-31 08:39:13 25 4
gpt4 key购买 nike

我正在尝试通过我的 Gatsby 元素中的图像文件夹映射数组,同时相应地在 CSS 网格画廊中显示它们:

enter image description here

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

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%?

最佳答案

您已经在使用 gridTemplateColumns在网格中定义您的列 - 这样您就可以省略 gridTemplateAreas共。请参阅下文,了解此时您的代码如何简化为 vanilla 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>
)}

关于html - 通过动态 CSS Grid 图片库进行映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55163584/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com