网格列未跨越整行

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。

网格列未跨越整行

Grid column not stretching across entire row

html

css

css-grid