不含高度的网格间隙百分比

时间:2018-11-30 19:19:32

标签: css css3 percentage css-grid

我想要一个像这样的网格:

.grid{
  display:grid;
grid-gap:50%;
  background-color:blue;
}
.grid-1{
  background-color:red;
}
<div class="grid">
 <div class="grid-1">
  test
 </div>
 <div class="grid-1">
  test
 </div>
 <div class="grid-1">
  test
 </div>
</div>

我认为所有浏览器正确理解百分比值都是一个很大的问题 该如何解决?

马库斯

1 个答案:

答案 0 :(得分:2)

由于我们最初无法确定百分比,因此网格首先要考虑以下内容来计算高度:

console.log(document.querySelector('.grid').offsetHeight)
.grid {
  display: grid;
  background-color: blue;
}

.grid-1 {
  background-color: red;
  opacity:0.5;
}
<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

然后使用该高度计算间隙,然后将其添加到网格中。这不会再次触发网格的高度计算,因为它将创建一个循环,从而产生溢出。

console.log(document.querySelector('.grid').offsetHeight)

console.log(document.querySelector('.grid-1:nth-child(2)').offsetTop - document.querySelector('.grid-1:nth-child(1)').offsetTop - document.querySelector('.grid-1:nth-child(1)').offsetHeight)
.grid {
  display: grid;
  grid-gap:100%;
  background-color: blue;
  margin-top:50px;
}

.grid-1 {
  background-color: red;
  opacity:0.5;
  transform:translateY(-100%);
}
<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

如您所见,我使用100%并添加了变形,以查看间隙等于初始高度(JS代码也证实了这一点)

一个简单的解决方法是避免使用百分比值并使用像素值,以便浏览器将它们包含在初始计算中。在所有情况下,使用百分比值都不是很好的情况,因为您不知道“百分比是什么?”

.grid {
  display: grid;
  grid-gap:50px;
  background-color: blue;
  margin-top:50px;
}

.grid-1 {
  background-color: red;
  opacity:0.5;
}
<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>


还有更多示例,这些示例稍后会评估百分比值并产生不想要的结果:

CSS Grid - unnecessary word break

Why does percentage padding break my flex item?