Почему процентное значение внутри сетки создает переполнение в сетке CSS?
Я бы хотел иметь такую сетку:
.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
Первоначально мы не можем определить процент промежутка сетки, поскольку он зависит от высоты, поэтому мы игнорируем его (мы рассматриваем его как auto). Браузер сначала вычисляет высоту, учитывая такой контент:
console.info(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.info(document.querySelector('.grid').offsetHeight)
console.info(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>Вы можете обратиться к официальной спецификации, чтобы получить более подробную информацию об этом поведении, но это будет нетривиально:
https://www.w3.org/TR/css-sizing-3/#percentage-sizing
Вот еще несколько примеров, когда процентные значения оцениваются позже и приводят к нежелательным результатам:
Почему высота моего элемента сетки вычисляется неправильно?
CSS Grid - ненужный разрыв слова
Почему процентное заполнение ломает мой гибкий элемент?
@MarkusSchneider нет, у вас есть цикл, это кажется вам простым, но это не так: представьте, что у вас есть элемент A с высотой, определяемой элементом B, а высота элемента B определяется в процентах от высоты A. Это В данном случае сетка - это A, а промежуток - B. Сначала мы определяем высоту A, а затем B, если мы вернемся к переопределению A, тогда мы будем обязаны переопределить B и так далее. Это никогда не кончится ... И, как я уже сказал, вам нужно спросить себя, "в процентах от чего?" даже ты вы не можете ответить на этот вопрос. Вы можете мне сказать% чего?
Я бы вычислил это так: строка высоты 1 + строка высоты 2 + строка высоты 3 + 0,5 * (3-1) * (строка высоты 1 + строка высоты 2 + строка высоты 3) = высота сетки. Итак, для меня на самом деле он вычисляет высоту строк, чем сетку, чем зазор, я бы вычислял высоту строк, зазор, сетку
@MarkusSchneider, вы хотите, чтобы расчет был таким :) вы думаете, что так должно быть, но нет. Расчет выглядит следующим образом: (1) мы не можем разрешить зазор в сетке, потому что его процентное соотношение, мы перемещаем (2) мы вычисляем высоту сетки (в данном случае это сумма трех строк, но это может быть что-то еще в зависимости от других свойств ) (3) теперь у нас есть высота нашей сетки, мы можем решить зазор в сетке (4) мы добавляем зазор в сетке (5), у нас есть переполнение, и мы останавливаемся. Этот случай кажется простым, но проверьте ссылки, которыми я поделился, чтобы увидеть другую ситуацию, где она сложнее.
@MarkusSchneider не забывайте, что у нас могут быть поля, отступы и т. д., И для браузера нетривиально выполнить требуемый расчет. Промежуток сетки также является частью высоты сетки. Вы можете четко заметить это при использовании значения в пикселях, поэтому высота сетки - это не только строка, но также зазор, поля, отступы и т. д.
Итак, есть ли какое-либо возможное полностью гибкое решение проблемы?
@MarkusSchneider - это зависит от того, как вы хотите, чтобы он реагировал, есть много способов. Мы не говорим об адаптивности, когда дело касается изменения ширины элемента, а не высоты. высота никогда не является проблемой для отзывчивости
Лучшим решением было бы мое решение, но правильное изменение размера div. Моя проблема в том, что у меня 5 столбцов в полноэкранном режиме и 3 для мобильных устройств. на полный экран (1920х1080) 50 пикселей не проблема. на 1366x768 это может быть проблемой, а для планшетов и мобильных телефонов существует так много разных типов, поэтому определение их в пикселях не является решением. Высота, с которой необходимо реагировать, представляет собой проблему при повороте экрана (например, мобильного телефона или планшета).
@MarkusSchneider вы можете поделиться кодом? со столбцом у вас не будет проблем, как со строками
CSS для сетки: .grid {margin-left: 20%; маржа-право: 20%; дисплей: сетка; сетка-шаблон-столбцы: 1fr 1fr 1fr 1fr 1fr; сетка-гэп: 2%; выравнивание текста: центр; фон: # f7f7f7; отступ: 20 пикселей 5%; padding-top: 0 пикселей; }. Ширина div составляет точно 60%, и все столбцы имеют правильный размер (включая зазор). Так что я не понимаю ... Столбцы работают - строки не работают
@MarkusSchneider со столбцом у нас нет проблемы, потому что ширина не определяется содержимым, таким как высота, поэтому цикла нет .. ширина составляет 100% родительской ширины, поэтому мы можем устранить пробел ... если ваш сетка - ваш единственный элемент, тогда он будет иметь ширину браузера, а затем мы 2% от этой ширины
Итак, мой css будет выглядеть следующим образом: grid-gap: 10px 2%; / * Пожалуйста, css научитесь вычислять высоту div * /
@MarkusSchneider да, это сделает его отзывчивым по ширине, а высота будет рассчитана нормально;)
Спасибо за ответ. У меня два балла 1. 50% Зазор сетки означает 50% от суммы высот строк и ширины столбцов. После этого общую высоту можно легко вычислить. 2. Я ненавижу значения в пикселях, потому что они не реагируют. Есть ли возможность решить это?