html - 如何将网格列设置为与其他网格布局相同

Question

我有两种使用显示网格的布局。 See Screenshot

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

布局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 的值如何，间隙大小都以绝对 px 单位指定，这两个布局都不会留下相同数量的可用空间。

但是，您可以将第一列设置为百分比，然后它们在两种布局上的显示结果应该相同。

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

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

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

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

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

您可以指定这两种布局的第一列的宽度，然后像现在一样指定其余的 fr 设置。