css - 使宽度为 1fr + 1fr = 2fr(有网格间隙)

Question

让前两列的总宽度与第三列的总宽度相同的正确方法是什么？如果我像这样拆分它们:

.grid {
    display:grid;
    grid-template-columns:1fr 1fr 2fr;
    grid-gap:2em;
}

<div class="grid">
    <div class="small">Col 1</div>
    <div class="small">Col 2</div>
    <div class="large">Col 3</div>
</div>

此处示例:https://codepen.io/shorty2240/pen/baGYoW

我假设我可以在这个网格下面制作另一个网格，具有相同的网格间隙，1fr 1fr，它会排成一行，但显然不会。

我想尽可能避免嵌套前两项，因为实际元素会自动输出这三项，而环绕前两项可能会出现问题。

Answer 1

您应该将网格设置为 4 列宽，并将您的 .large 定义为使用 2 列。

这其实与bootstrap、foundation等流行css框架中column的工作方式是一致的。

网格模板列:1fr 1fr 1fr 1fr;

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

或者使用任何简写语法来设置 4 列和网格列。