在中间列占用剩余空间的情况下,左右两列是否可以拥有相同的宽度? 我不想像grid-template-columns: 20% 60% 20%
这样设置百分比,因为不确定这些列的内容是什么。
Flexbox和表格似乎都没有解决此问题的方案,因此我再次尝试使用网格分数,但没有任何运气。
.grid {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr auto 1fr;
}
.col-1 {
background-color: #FFCCCC;
white-space: nowrap;
}
.col-2 {
background-color: #CCFFCC;
}
.col-3 {
background-color: #CCCCFF;
white-space: nowrap;
}
<div class="grid">
<div class="col col-1">This is column one</div>
<div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque placerat urna ut finibus mollis. Morbi risus odio, pulvinar non rutrum nec, lacinia sit amet diam. Sed vitae imperdiet felis, sed gravida tortor. Maecenas a nisl ac leo finibus sollicitudin. Vestibulum non scelerisque odio, vehicula aliquam tortor.</div>
<div class="col col-3">Column 3</div>
</div>