网格列没有延伸到整行[重复]

Question

我的 html 正文中有以下 html

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

使用 this 作为内联样式

.wrapper { 
  display: grid; 
  grid-template-columns: 1fr 7fr;
} 
.box1 { 
  grid-column: 1 / 2;
  grid-row: 1 / 1; 
  background-color: red;
}
.box2 { 
  grid-column: 1 / 1; 
  grid-row: 2 / 2; 
  background-color: blue;
}
.box3 { 
  grid-column: 2 / 2; 
  grid-row: 2 / 2; 
  background-color: green;
}

这可能不理解规范，但任何人都可以解释为什么我必须从

更改 box1

grid-column: 1 / 2;

到

grid-column: 1 / 3;

为了使 div1 跨越两列？ 见https://jsfiddle.net/vyx4jacm/

Answer 1

grid-column 是 grid-column-start 和 grid-column-end 的缩写。 grid-column 的第二个数字是您的结束网格线。

由于您只指定了 2 列（通过grid-template-columns），这意味着将有 2 列轨道和 3 列网格线。因此，要跨越所有，您需要 grid-column-end 值为 3，而不是 2。