html – 网格行间隙不应用百分比

发布时间：2020-12-14 22:40:55 所属栏目：资源来源：网络整理

导读：所以我有一个45图像网格,图像可以是各种尺寸,但最大尺寸为180x180px. 我的CSS将我的列间隔2.5％,但让我的行触摸.这是因为我以像素为单位定义了行高吗？ .grid { margin-left: 5%; margin-right: 5%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;

所以我有一个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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!