我有一个 div,其元素对齐为一行,这是它的 css 类:
.myRow {
display: grid;
grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
padding: 10px;
}
<div class="myRow">
<div style="color:blue; width: 5px;">aa</div>
<div style="color:red;">bb</div>
<div style="color:green;">ccc</div>
<div style="color:orange;">ddd</div>
<div style="color:purple;">eee</div>
</div>
我希望能够消除前两个间隙并保留其余的间隙,就像如何grid-template-columns
works.
可以用网格来做到这一点吗?
编辑:我希望它是这样的:
Add 负右边距其值等于网格间隙
.myRow {
display: grid;
grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
padding: 10px;
}
.margin {
margin-right: -10px
}
<div class="myRow">
<div class="margin" style="color:blue; width: 5px; ">aa</div>
<div class="margin" style="color:red;">bb</div>
<div style="color:green;">ccc</div>
<div style="color:orange;">ddd</div>
<div style="color:purple;">eee</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)