使栅格项目跨度到最后一行/列

Question

当我不知道行数时，是否可以使栅格项目从第一行开始到最后一行？

可以说我有以下html与未知数量的框。

我该如何制作第一个网格线到最后一个网格线的第三个.box？

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; 
 
    grid-template-rows: auto [last-line]; 
 
} 
 

 
.box { 
 
    background-color: blue; 
 
    padding: 20px; 
 
    border: 1px solid red; 
 
} 
 

 
.box:nth-child(3) { 
 
    background-color: yellow; 
 
    grid-column: last-col/span 1; 
 
    grid-row: 1/last-line; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box">3</div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 1

您可以添加grid-row-start到箱子的CSS，并将其设置为跨越一个高得离谱号码。

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; 
 
    grid-template-rows: auto [last-line]; 
 
} 
 

 
.box { 
 
    background-color: blue; 
 
    padding: 20px; 
 
    border: 1px solid red; 
 
} 
 

 
.box:nth-child(3) { 
 
    background-color: yellow; 
 
    grid-column: last-col/span 1; 
 
    grid-row: 1/last-line; 
 
    grid-row-start: span 9000; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box">3</div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

编辑 - 免责声明：

这是一个非最优的解决方案，并在每个浏览器不工作，要小心！虽然这可能在某些浏览器（Chrome）中可用，但其他浏览器（Firefox）会创建导致问题的荒谬行数。

Answer 2

当我不知道行数时，是否可以使网格项从第一行开始到最后一行？

看起来这个功能在CSS Grid Module Level 1中没有。所以答案是“不”，目前还不可能。

---

虽然CSS电网不能让一个网格区域跨度在隐格所有列/行，它可以在明确网格做的工作。

使用负整数。

下面是在CSS网格规范两个有趣的部分：

7.1. The Explicit Grid

在网格布局性数字指标从边缘明确网格的 计数。正面指数从开始点开始计算， 而负面指数从结束侧开始计算。

这里......

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

如果一个负整数给出，它不是计数反向，从明确格栅端部边缘开始 。

换句话说，有一个明确的网格处理时，这是您定义使用这些属性的网格：

• grid-template-rows
• grid-template-columns
• grid-template-areas

。 ..您可以通过设置此规则使网格区域跨所有列：

grid-column: 3/-1; 

这告诉网格区域从第三列线到最后一列线。

相反的是：

grid-column: 1/-3; 

同样，这种方法只适用于明确的网格。