所以我有一个 4x5 的图像网格,其中图像可以有各种尺寸,但最大为 180x180 像素。
<div class="grid">
<div class="box 1 a"><img src="./assets/Account-Attempt-4-1.gif"></div>
...
<div class="box 5 d"><img src="./assets/really-queer-Christmas1.gif"></div>
</div>
我的 CSS 会将我的列分隔开 2.5%
,但让我的行保持接触。这是因为我以像素为单位定义了行高吗?
.grid {
margin-left: 5%;
margin-right: 5%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 180px 180px 180px 180px 180px;
grid-gap: 2.5% 2.5%;
}
.box {
display: flex;
align-items: center;
justify-content: center;
}
最佳答案
如果你想为你的 grid-row-gap
使用百分比,你需要为你的 .grid
div 设置一个固定的高度。否则你需要使用 px
。
此处示例:https://jsfiddle.net/t53s25us/
.grid {
margin-left: 5%;
margin-right: 5%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 2.5% 2.5%;
height: 200px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}
<div class="grid">
<div class="box 1 a">AAAA</div>
<div class="box 1 a">AAAA</div>
<div class="box 1 a">AAAA</div>
<div class="box 1 a">AAAA</div>
<div class="box 1 a">AAAA</div>
</div>
关于html - Grid-row-gap 不应用百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50362897/