所以我有一个4x5图像网格,图像可以有多种尺寸,但最大尺寸为180x180px。
<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;
}
答案 0 :(得分:3)
如果您想使用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;
}
&#13;
<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>
&#13;