宽度为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列。

这实际上与流行的css框架（如bootstrap和foundation）中的列的工作一致。

grid-template-columns:1fr 1fr 1fr 1fr;

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

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

Answer 2

正如@Rene所提到的那样定义4列，但告诉.large div跨越2列而.small只有1列。

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}

.grid div {
  background: grey;
  height: 75px; /* for demo purposes */
}

.small {
  grid-column: span 1;
}

.large {
  grid-column: span 2;
}

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