gpt4 book ai didi

css - 使用网格项宽度缩放网格项高度

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

<分区>

我正在制作一个网格布局,它根据页面的宽度调整不同数量的元素(正方形)的大小,并将不适合在同一行上的元素换行到下一行。

我已经尝试了很多方法,例如使用 vw 和删除 minmax,但似乎都没有得到我想要的结果。这是当前的代码:

CSS:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.grid-item {
background-image: url('../mood.jpg'); /*square image*/
background-repeat: no-repeat;
background-size: contain;
align-content: center;
color: black;
height: 8rem;
}

html:

<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>

现在它在图像右侧有一些额外的空间,我希望缩放高度以适应该额外空间。

编辑:Here's a pen更彻底地说明了问题。网格项不是正方形,而是矩形,我希望它们是正方形。

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