gpt4 book ai didi

css - 填补 CSS 网格布局中的空白

转载 作者:行者123 更新时间:2023-11-28 19:27:16 27 4
gpt4 key购买 nike

<分区>

我正在尝试实现与此线框匹配的网格布局:

wireframe

到目前为止,我得到了以下标记:

<div class="grid">
<div class="spanWidth">
<img src="https://loremflickr.com/290/130?random=1" />
</div>
<div>
<img src="https://loremflickr.com/140/130?random=2" />
</div>
<div>
<img src="https://loremflickr.com/140/180?random=3" />
</div>
<div>
<img src="https://loremflickr.com/140/130?random=4" />
</div>
<div>
<img src="https://loremflickr.com/140/130?random=5" />
</div>
<div>
<img src="https://loremflickr.com/140/180?random=6" />
</div>
<div>
<img src="https://loremflickr.com/140/130?random=7" />
</div>
</div>

使用 CSS:

.grid {
display: grid;
grid-gap: 10px;
}

.spanWidth {
grid-column: 1 / span 2;
}

我遇到的问题是尺寸不规则的图像不符合“行”布局。它们占据 1.25 行。这意味着我最终会在网格中出现空白:

grid with gaps

我可以在这里做些什么来匹配线框吗?

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