如何在CSS网格中使用行跨度

Question

我不确定是否可以使用css网格来实现我想要实现的内容，但我目前的实现方式不起作用。以下是我想要实现的布局。红色框跨越了两行。

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
  background-color: red;
}

.block {
  background-color: grey;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

- user992731

---

红色的方框不跨越2行，它跨越2列！只需将 grid-column: span 2; 应用于该方框即可。 - tacoshy

Answer 1

评论中提到，您不需要跨越2行，而是需要跨越2列。此外，您需要将类应用于第1个元素：.wide { grid-column: span 2; }

在您的图片中，您还有一个6列网格而不是5列网格

.grid {
  display: grid;
  grid-template-columns: repeat(6, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.wide {
  grid-column: span 2;
}


/* for styling purpose only */
.grid > div:nth-child(n+1) {
  background-color: grey;
}

.grid > div:nth-child(1) {
  background-color: brown;
}

<div class="grid">
  <div class="wide"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

- tacoshy

---

我曾经面临过类似的困境，但是我需要有两列，然后有一些项目跨越两行。起初，我使用数字位置来硬编码这些内容，但是我完全忽略了你使用的“span”的用法。所以我决定尝试“grid-row: span 2”，它完美地解决了问题！谢谢！ - Smithee

Answer 2

以下是用于网格跨度选项的 Html 和 Css：

<div class="grid">
   <div class="col-span"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

你需要的 CSS 代码是：

.grid {
      display: grid;
      grid-template-columns: repeat(4, 50px);
      grid-auto-rows: 50px;
      grid-gap: 5px;
  }

  .col-span {
      grid-column: span 2;
  }

  .grid > div {
       background-color: #fcfcfc;
  }

  .grid .col-span {
       background-color: gray;
   }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.col-span {
  grid-column: span 2;
}

.grid > div {
  background-color: #e9e0e0;
}

.grid .col-span {
  background-color: gray;
}

<div class="grid">
  <div class="col-span"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

- Developer Ali Usman

Answer 3

以下代码完全可以满足您的需求。

<div id="wrapper">
    <div class="block" style="grid-column: 1/3;"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

在 CSS 中，我删除了 .wide 和 .block。#wrapper 保持不变。

---

我不确定使用CSS Grid是否可以实现我想要的目标。

任何事情都可以使用CSS Grid实现。

- Andreas Bonini

---

太棒了！谢谢Thomas!!! - user992731

@user 欢迎！如果你想学习现代CSS，我非常喜欢https://moderncss.dev/，那里有很棒的材料！例如：[3个CSS网格技术让你成为网格转换者](https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/)。 - Andreas Bonini

Answer 4

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 2;
  grid-column: 1 /3;
  background-color: re
}

.block {
  background-color: blue;
}

<div id="wrapper">
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

- Basta

---

您的答案可以通过提供更多支持信息来改进。请编辑以添加进一步详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以在 帮助中心 找到有关撰写好答案的更多信息。 - Community