使柵格項目跨度到最後一行/列

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; 

同樣，這種方法只適用於明確的網格。