如何将轴网列设置为与其他轴网布局相等

Question

我有两种使用显示网格的布局类型。参见屏幕截图

但我想知道为什么第一列的宽度不相等？

布局1第一列宽度为：239.40px

布局2第一列宽度为：240.70px

如何使用fr将其设置为相等？

这是我的代码

.grid-container {
display: grid;
grid-gap: 25px;
}
/* News Module 1 */
.grid-container--news1 {
grid-template-columns: 2fr 1fr 1fr 1fr;
}
.grid-container--news1 .grid-item:nth-of-type(1) {
grid-row: 1 / 4;
}
.grid-container--news1 .grid-item:nth-of-type(2) {
grid-column: 2 / 4;
}
/* News Module 2 */
.grid-container--news2 {
grid-template-columns: 1.3fr 1fr 1fr;
}
.grid-container--news2 .grid-item:nth-of-type(1) {
grid-row: 1 / 3;
}
.grid-container--news2 .grid-item:nth-of-type(2) {
grid-column: 2 / 4;
}
.grid-item {
background: steelblue;
color:

<div class="row gx-3 gx-md-4">
<div class="col-12 mb-3">
<h3>News Module 1</h3>
<div class="grid-container grid-container--news1">
<?php for ($i=1; $i < 7; $i++): ?>
<div class="grid-item"><?php echo $i; ?></div>
<?php endfor; ?>
</div>
</div>
<div class="col-12">
<h3>News Module 2</h3>
<div class="grid-container grid-container--news2">
<?php for ($i=1; $i < 5; $i++): ?>
<div class="grid-item"><?php echo $i; ?></div>
<?php endfor; ?>
</div>
</div>
</div>
</div>

Answer 1

我认为使用fr.无法将其设置为相等

会有舍入错误，并且无论1vw的值如何，间隙大小都是以绝对像素为单位指定的，这两个布局都不会留下相同的可用空间。

然而，您可以将第一列设置为一个百分比，然后它们在两种布局中都应该相同。

或者，您可以进行计算，根据容器的宽度减去间隙来决定所需的宽度。

看看我们得到的第一个网格：

2fr+3*25px+3fr=100%

所以第一列的宽度可以通过CSS计算为

calc((100% - 75px) * 2 / 5)

您可以为两种布局的第一列宽度指定该宽度，然后为剩余的fr设置指定该宽度。

Answer 2

绕过的简单方法是使用"%"以设置第一列的宽度而不是"0"；fr"；。

而不是使用：

.grid-container--news1 {
grid-template-columns: 2fr 1fr 1fr 1fr;
}
/* News Module 2 */
.grid-container--news2 {
grid-template-columns: 1.3fr 1fr 1fr;
}

你可以使用：

.grid-container--news1 {
grid-template-columns: 40% 1fr 1fr 1fr;
}
/* News Module 2 */
.grid-container--news2 {
grid-template-columns: 40% 1fr 1fr;
}