3

我有一个 3 X 3 CSS 网格。

我有一排我有三个项目A，B& C。

我希望项目C有rowspan2 个。

为此，我正在使用grid-row: 1 / span 2;. 它占用两行，但它被放置在第一列而不是简单地位于第三列。我不知道为什么会这样。

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

解决此问题的一种方法是明确设置grid-column: 3 / span 1我不想做的事情。我希望项目以它们在 HTML 中的方式放置。

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

.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;
}
<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div>
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
</div>

4

3 回答 3

5

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

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

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

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

规范这部分的第2 步（针对一个项目）和第 4 步（针对其余项目）

第1部分

第2部分

于 2017-05-04T18:50:41.440 回答
2

如果只有一个存货到一个行号，它将首先出现并在流程中保持领先。为了避免这种情况，其他网格项目也需要设置为默认行。

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

于 2017-05-04T14:04:50.123 回答
1

显然，规范中有一些东西会导致这种行为。我还不确定它是什么。（更新：请参阅@Vals 的答案以获得解释。）

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

代替：

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

采用：

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

从规范：

9.3. 基于行的放置：grid-row-start、 grid-column-start、grid-row-end和grid-column-end 属性

、grid-row-start、和 属性确定网格项在网格中的大小和位置grid-column-start，方法是为其网格放置提供一条线、一个跨度或无（自动），从而指定 inline-start、block-start、inline-end 和其网格区域的块端边缘。grid-row-endgrid-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。

于 2017-05-04T14:05:45.900 回答