Question

我有一个3 X 3 CSS Grid。

我有一行我有三个项目A，B＆amp; C。

我希望项目C的{{1}}为2.

为此，我正在使用rowspan。这是两排，但它被放置在第一列而不是简单地位于第三列。我不知道为什么会这样。

我希望项目C保留在HTML中的位置。

解决此问题的一个方法是明确设置我不想做的grid-row: 1 / span 2;。我希望项目的放置方式与HTML格式相同。

有没有办法抑制这种行为？

＆＃13;

grid-column: 3 / span 1

＆＃13;

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

h1 {
  border: 2px solid;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.a {
  grid-row: 1 / span 2;
  background: orange;
}

＆＃13;

Answer 1

另一种解决方法（指出为什么为其他项目说明一行的原因）：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

h1 {
  border: 2px solid;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.a {
  grid-row: 1 / span 2;
  background: orange;
}

.b {
  grid-row: 1;
}

<div class="grid-container">
  <div class="b">
    <h1>A</h1>
  </div>
  <div class="b">
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
</div>

这种行为的原因是限制性更强的元素首先被定位。这样，网格算法实现解决方案的可能性就更大了。

也就是说，具有需求的元素将首先定位，最后没有需求的元素。

此part of the spec

中的步骤2（对于 a 项目）和4（对于其余项目）

Answer 2

如果只有一个人获得一个行数，它将首先出现并在流程中保持领先。为避免这种情况，还需要将其他网格项设置为defaut行。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

div {
  grid-row: 1;/* here is the basic fix but will set each item on first row */
}

h1 {
  border: 2px solid;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.a {
  grid-row: 1 / span 2;
  background: orange;
}

<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div>
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
</div>

否则你还需要告诉它应该是grid-column

.a {
  grid-row: 1 / span 2;
  grid-column:3;
  background: orange;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

h1 {
  border: 2px solid;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.a {
  grid-row: 1 / span 2;
  grid-column:3;
  background: orange;
}

<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div>
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
</div>

或让自动展示位置完成其工作，同时仅设置要跨越的行数，这是在我看来，这是设置最少css规则/选择器的最灵活方式， 太多网格杀死网格 :)，简单明了：

.a {
  grid-row:  span 2;
  background: orange;
}

使用一些示例让.aclass在没有设置列的情况下完成工作，也没有将行号放在哪里，它只是跨越它在流程中的位置

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

h1 {
  border: 2px solid;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.a {
  grid-row: span 2;
  background: orange;
}

<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div>
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
</div>

<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div class="a">
    <h1>B</h1>
  </div>
  <div>
    <h1>C</h1>
  </div>
</div>


<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div>
    <h1>B</h1>
  </div>
  <div>
    <h1>C</h1>
  </div>
  <div>
    <h1>D</h1>
  </div>
  <div>
    <h1>E</h1>
  </div>
  <div class="a">
    <h1>F</h1>
  </div>
  <div>
    <h1>G</h1>
  </div>
  <div>
    <h1>H</h1>
  </div>
</div>
<hr/>
<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div>
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
  <div>
    <h1>D</h1>
  </div>
  <div>
    <h1>E</h1>
  </div>
  <div>
    <h1>F</h1>
  </div>
  <div>
    <h1>G</h1>
  </div>
  <div>
    <h1>H</h1>
  </div>
</div>

Answer 3

显然，规范中存在导致此行为的内容。我还不确定它是什么。（更新：请参阅@Vals' answer获取解释。）

但是，这是一个有效而简单的解决方案：

而不是：

.a {
  grid-row: 1 / span 2;
}

使用：

.a {
  grid-row-end: span 2;
}

来自规范：

9.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

grid-row-start，grid-column-start，grid-row-end和   grid-column-end属性确定网格项的大小和位置   通过贡献一条线，一个跨度或什么都没有（自动）在网格内   到它的网格放置，从而指定内联开始，   网格区域的块起始，内联结束和块结束边缘。

...

例如，grid-column-end: span 2表示第二个网格线   在grid-column-start行的最终方向。

此外，请考虑这条单一规则，让您完全控制并使其全部工作：

.a {
  grid-area: 1 / 3 /  3 / 4;
}

jsFiddle

grid-area简写属性按以下顺序解析值：

grid-row-start
grid-column-start
grid-row-end
grid-column-end

请注意逆时针方向，与margin和padding相反。

如何防止网格行跨度改变列位置？

3 个答案: