大佬教程收集整理的这篇文章主要介绍了html – 网格行间隙不应用百分比，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
所以我有一个4×5图像网格,图像可以是各种尺寸,但最大尺寸为180x180px.
我的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;
}
大佬总结
以上是大佬教程为你收集整理的html – 网格行间隙不应用百分比全部内容，希望文章能够帮你解决html – 网格行间隙不应用百分比所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。