列3 = 〜150px(600 * 0.281787 / 1.120469)
INSTEAD我已经测试过的所有浏览器(Chrome,Safari,Firefox)呈现以下宽度的列:
SO第3列是正确的宽度。如果我删除css列是预期的宽度,甚至是陌生人!如果我删除了
min-width: 150px
min-width
grid-template-columns
grid-template-columns: minmax(150px, 0.370162fr) minmax(150px, 0.46852fr) minmax(150px, 0.281787fr)
您需要根据this anding
.。
*,
::before,
::after {
box-sizing: border-box;
}
.table {
display: grid;
width: 600px;
padding: 1px;
gap: 1px;
background-color: #ccc;
grid-template-columns: 0.370162fr 0.46852fr 0.281787fr;
}
.cell {
min-width: 150px;
padding: 8px 12px;
background-color: white;
}
<div class="table">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>