Html 网格项未按指定跨越

我试图使一个网格项（

.item3

）完全跨越并向下3行。在按列跨越之后，它将不会按行跨越。但是，如果我将“行跨度”值增加到4，它就会起作用。但是，跨度只有2行，而不是4行。这是密码

.container{
显示：网格；
网格模板列：重复（5，1fr）；
栅隙：10px；
背景：黑色；
}
.项目{
显示：网格；
边界半径：2px；
边框：1px纯红；
背景色：var（--黄色）；
}
.项目3{
网格柱：1/-1；
网格行：跨度3；
}

3.
4.
5.
6.
7.
8.
9
10

您的代码没有行的定义。一旦你添加了它，你就会看到跨度明显地达到了预期的效果

在此之前，虚拟行有点崩溃，因为它们本身没有内容，并且大小是默认值，即

auto

grid-template-rows: repeat(5, 24px);

.container{
显示：网格；
网格模板列：重复（5，1fr）；
网格模板行：重复（5，24px）；
栅隙：10px；
背景：黑色；
}
.项目{
显示：网格；
边界半径：2px；
边框：1px纯红；
背景色：var（--黄色）；
}
.项目3{
网格柱：1/-1；
网格行：跨度3；
}

3.
4.
5.
6.
7.
8.
9
10

您需要提供有关网格在行中的外观的信息

如果不在父对象上设置

网格模板行

，则子对象上的

网格行：span 3

将在隐式网格上计算，并在默认情况下自动调整大小（在高度标注中）

设置

网格模板行

将创建一个显式网格

.container{
显示：网格；
网格模板列：重复（5，1fr）；
网格模板行：重复（5，20px）；
栅隙：10px；
背景：黑色；
}
.项目{
显示：网格；
边界半径：2px；
边框：1px纯红；
背景色：var（--黄色）；
}
.项目3{
网格柱：1/-1；
网格行：跨度3；
}

3.
4.
5.
6.
7.
8.
9
10

此布局中有很多内容

但是，从本质上讲，主要问题是容器中缺少额外的高度

下面是正在发生的事情：

---

显式行和隐式行 这就是你所拥有的：

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
}

.item {
   display: grid;
   border-radius: 2px;
   border: 1px solid red;
   background-color: var(--yellow);
}

.item3 {
   grid-column: 1 / -1;
   grid-row: span 3;
}

.item

规则对问题没有影响，因此为了便于说明，我们只留下边界

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
}

.item3 {
   grid-column: 1 / -1;
   grid-row: span 3;
}

.item {
  border: 1px solid red;
}

由于尚未定义

网格模板行

或

网格模板区域

，因此没有明确的行。所有行都是隐式的（根据需要创建）

隐式行的大小由

网格自动行

控制，其默认值为

自动

（内容的大小）

因此，当前每行的高度由HTML中文本的大小（数字）定义

数字是不可见的，因为背景和文本都是黑色的。为了更好地理解行高的来源，让我们将文本颜色更改为白色

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
   color: white; /* new */
}

以下是到目前为止的完整代码：

.container{
显示：网格；
网格模板列：重复（5，1fr）；
栅隙：10px；
背景：黑色；
颜色：白色；
}
.项目3{
网格柱：1/-1；
网格行：跨度3；
}
.项目{
边框：1px纯红；
}

3.
4.
5.
6.
7.
8.
9
10

如果不在父级上设置

网格模板行

，则子级上的

网格行

将不会执行任何操作。那不是真的。删除

网格模板行：重复（5，20px）和更改
网格行：跨度3至
网格行：跨度50