使用百分比作为网格间距时,CSS网格高度错误 [英] CSS grid height wrong when using percent as grid gap
本文介绍了使用百分比作为网格间距时,CSS网格高度错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用其中包含图像的CSS网格,并希望在元素之间设置一个随着网格大小缩放的间隙。因此,我将 grid-gap
设置为2%,但是这样做会导致网格高度错误,并使网格内容与下面的下一个元素重叠。像vw一样,将其他单位用作 grid-gap
。
I'm using a CSS grid with images in it and wanted to set a gap between elements that scales with the size of the grid. So I set the grid-gap
to 2%, but doing that caused the grid height to be wrong, and caused the grid contents to overlap with the next element below. Using other units as the grid-gap
, like vw works fine.
如果我想使用百分比作为差距,如何解决重叠问题?
If I want to use a percentage as the gap, how can I fix the overlap problem?
.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>
推荐答案
10%
.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>
这篇关于使用百分比作为网格间距时,CSS网格高度错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文