Неправильная высота сетки CSS при использовании процентов в качестве разрыва сетки - PullRequest
Новая
       9

Неправильная высота сетки CSS при использовании процентов в качестве разрыва сетки

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

Я использую сетку CSS с изображениями в ней и хотел установить промежуток между элементами, который масштабируется с размером сетки. Поэтому я установил grid-gap на 2%, но это привело к неправильной высоте сетки и к тому, что содержимое сетки перекрылось со следующим элементом ниже. Используя другие единицы как grid-gap, вроде vw работает нормально.

Если я хочу использовать процент в качестве разрыва, как я могу исправить проблему с перекрытием?

Вот минимальное воспроизведение проблемы, с которой я сталкиваюсь: 

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 10%;
  background-color: #EEE
}

.grid-item {
  display: block;
  width: 100%;
}
<div class="grid">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
</div>
<p>Why does this line overlap with the grid?</p>

1 Ответ

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

10%, похоже, соблюдают flex. 

.container {
   width:90%;
   margin:0 auto;
   display:block;
}

.grid {
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
  background-color: #EEE
}

.grid-item {
  flex:0 0 45%;
  max-width:500px;
  margin:0 0 10% 0;
  display: block;
}

img.grid-item:last-of-type {
   margin-bottom:0;
}
 <div class="container">
<div class="grid">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
</div>
<p>Why does this line overlap with the grid?</p>
</div>
...