Процент пропуска сетки без высоты - PullRequest
Новая
       4

Процент пропуска сетки без высоты

0 голосов
/ 30 ноября 2018

Мне бы хотелось, чтобы сетка была такой: 

.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>

Я думаю, что для всех браузеров это действительно большая проблема - правильно понять процентные значения. Как решить эту проблему?

Markus

1 Ответ

0 голосов
/ 30 ноября 2018

Так как мы не можем разрешить процент вначале, сетка сначала вычисляет высоту, учитывая содержание как это: 

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 - ненужное словоперерыв

Почему процентный отступ нарушает мой элемент flex?

...