所以我有一个4×5图像网格,图像可以是各种尺寸,但最大尺寸为180x180px.
Box 1 a">
Box 5 d">
我的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 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;
}
Box 1 a">AAAABox 1 a">AAAABox 1 a">AAAABox 1 a">AAAABox 1 a">AAAA
@H_403_34@
