网格列不会在整行上延伸

Question

我的html正文中有以下html

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

将其作为内联样式

.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。