Html 使网格项跨到最后一行/列

当我不知道行数时，是否可以将网格项从第一行扩展到最后一行

假设我有以下带有未知数量框的html

如何使第三个

.box

从第一条网格线延伸到最后一条网格线

.container{
显示：网格；
网格模板列：重复（3，最小值（10rem，1fr））[最后一列]35%；
网格模板行：自动[最后一行]；
}
.盒子{
背景颜色：蓝色；
填充：20px；
边框：1px纯红；
}
.box:第n个孩子（3）{
背景颜色：黄色；
网格柱：最后一列/跨度1；
网格行：1/最后一行；
}

3.

您可以将css添加到该框中，并将其设置为跨越一个高得离谱的数字

.container{
显示：网格；
网格模板列：重复（3，最小值（10rem，1fr））[最后一列]35%；
网格模板行：自动[最后一行]；
}
.盒子{
背景颜色：蓝色；
填充：20px；
边框：1px纯红；
}
.box:第n个孩子（3）{
背景颜色：黄色；
网格柱：最后一列/跨度1；
网格行：1/最后一行；
网格行开始：span 9000；
}

3.

当我不知道行数时，是否可以将网格项从第一行扩展到最后一行

该问题的自然网格解决方案似乎在（级别1）中缺失。所以答案应该是“不”，严格地说是网格属性

然而，正如中所指出的，绝对定位是可能的

---

虽然CSS网格无法使网格区域跨越隐式网格中的所有列/行，但它可以在显式网格中完成此工作

使用负整数

CSS网格规范中有两个有趣的部分：

网格放置特性中的数字索引从边开始计数 对显式网格的定义。正索引从起始端开始计数， 而负索引从末尾开始计数

在这里

如果给定了一个负整数，它将以相反的方式开始计数 从显式栅格的结束边缘开始

换句话说，当处理显式网格时，即使用以下属性定义的网格：

• 网格模板行

• 网格模板列

• 网格模板区域

。。。通过设置以下规则，可以使网格区域跨越所有列：

grid-column: 3 / -1;

这将告诉栅格区域从第三条柱线延伸到最后一条柱线

反之亦然：

grid-column: 1 / -3;

---

同样，此方法仅适用于显式网格

一个解决方案，它实际上为我设置了

位置：绝对在要增长到最后的元素上。这将有其缺点，但在某些情况下可能是一个救命稻草。以下是一个完整的示例：


.grid{
显示：网格；
网格模板：自动/自动22px自动；
位置：相对位置；
}
弗林先生{
位置：绝对位置；
身高：100%；
宽度：2倍；
背景色：黑色；
格构柱：2/1跨；
利润率：0.10px；
}
.grid h1:n子（1）{网格行：1；网格列：1；文本对齐：右；}
.grid p:n子（2）{网格行：2；网格列：1；文本对齐：右；}
.grid h1:n子（3）{网格行：3；网格列：3；}
.grid p:n子（4）{网格行：4；网格列：3；}
.grid h1:n子（5）{网格行：5；网格列：1；文本对齐：右；}
.grid p:n子（6）{网格行：6；网格列：1；文本对齐：右；}
.grid h1:n子（7）{网格行：7；网格列：3；}
.grid p:n子（8）{网格行：8；网格列：3；}
p、 h1{边距：0；填充：0；}

1.
Lorem ipsum dolor sit amet，是一位杰出的献身者。在酒后驾车中，有一句名言叫“侵权”，一句名言叫“时不我待”

2.
Lorem ipsum dolor sit amet，是一位杰出的献身者

3.
在酒后驾车中，有一句名言叫“侵权”，一句名言叫“时不我待”

4.
Lorem ipsum dolor sit amet，是一位杰出的献身者。在酒后驾车中，有一句名言叫“侵权”，一句名言叫“时不我待”

因此，如果看起来还不可能，您可以选择更改结构并嵌套网格

如果事先无法做到这一点，请使用JavaScript取出第三个框并将其放置在原始网格容器旁边


.container{
显示：网格；
网格模板列：65%35%；
}
.嵌套网格{
显示：网格；
网格模板列：重复（自动拟合，最小值（10rem，1fr））；
网格模板行：自动；
}
.盒子{
背景颜色：蓝色；
垫底：20px；
边框：1px纯红；
}
.这边{
背景颜色：黄色；
网格柱：1-1；
边框：1px纯红；
}

3.
imo chomes正确处理此问题，而firefox则不正确。如果没有内容，那么创建这些行是没有意义的。。。。遗憾的是，最后一行没有“神奇”的名字（比如
：last child
），我认为按照你的要求去做是正确的行为，即使这会把黑客行为搞砸。如果我通过css使用了两列，我不希望Chrome不创建它们，因为这些列是空的。当然，CSS网格应该是固定的，以便在没有黑客攻击的情况下允许这样做。看起来Firefox不再创建荒谬的行数（或者至少列数，这是我需要/测试的）。至少，它不会在其网格调试器中报告它们。您如何实现这一点，从而使网格的第一项在网格开始时扩展为一个全高列？像这样@George，可能是错误的，因为我做了一个60秒的快速破解，但是，将选择器从
nth child
更新为
first child
，并将
网格列更新为
1
？我不理解显式/隐式部分。。。请解释这意味着什么显式网格是您使用
网格定义的行和列