Css 将宽度设为1fr和x2B；1fr=2fr（带格栅间隙）

让前两列的总宽度与第三列相同的正确方法是什么？如果我这样把他们分开：

.grid{
显示：网格；
网格模板柱：1fr 1fr 2fr；
网格间距：2米；
}

第1列
第2列
第3列

您应该将网格设置为4列宽，并定义

.large

以使用最多2列

<>这与流行的CSS框架（如Bootstrap和Buffic）中的列的工作是一致的。

网格模板列：1fr 1fr 1fr 1fr

.large {
  grid-column-start: 3;
  grid-column-end: 5;
}

或者对设置4列和网格列使用任何简写语法。
如@Rene所述定义4列，但告诉
.large
div跨越2列，而
small
仅跨越一列


.grid{
显示：网格；
网格模板列：重复（4，1fr）；
网格间距：1米；
}
.grid分区{
背景：灰色；
高度：75px；/*用于演示*/
}
.小{
格构柱：跨度1；
}
.大{
格构柱：跨度2；
}

第1列
第2列
第3列
第4列
第5列
fr
与任何间隙后的剩余空间相关。在这种情况下，您可能需要嵌套。像flex这样的任何其他方法都可以吗？或者你想要网格system@TemaniAfif我想我可以用flex来解决这个问题，但我想了解grid的优势！太棒了，这是我需要的答案。我为什么需要它以及它如何在这里发挥作用的示例：您可以制作小型
网格模板列：repeat（4，1fr）有大量带有网格的选项@Paulie_D很好地提到了span关键字和转发器。另一个很好的特性是
网格模板区域
。在我的回答中，我选择了（自以为是的）最容易阅读和理解的版本
代替
高度
以获得动态尺寸该高度仅用于演示目的。