在CSS Grid中創建所有行（包括隱含行）的列跨度

Question

我正在嘗試製作一個網格列跨度爲，每行行，包括隱式行。

我碰到this question問如何跨越所有網格行。第二個答案有一個更好的解決方案。這似乎是可行的，但我自己的例子和對第二個答案的評論表明它不起作用。

W3 spec也給出了一個非常接近的例子。

我的代碼有問題嗎？或者這可能是Firefox，Chrome，和 Safari中的錯誤？

I also have this example in a CodePen here。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    border: 1px solid #666; 
 
    max-width: 1000px; 
 
    padding: 10px; 
 
    display: grid; 
 
    grid-template-columns: 150px 1fr 300px; 
 
    /* grid-template-rows: repeat(auto) [rows-end]; Doesn't seem to help */ 
 
    /* grid-template-rows: [rows-start] repeat(auto) [rows-end]; Doesn't seem to help */ 
 
    grid-template-rows: repeat(auto); 
 
    grid-gap: 10px; 
 
    margin: 10px auto; 
 
    grid-auto-flow: row dense; 
 
    /* justify-items: stretch; */ 
 
    /* align-items: stretch; */ 
 
} 
 

 
.container>* { 
 
    grid-column: 2/3; 
 
    padding: 10px; 
 
    outline: 1px solid #666; 
 
} 
 

 
.pop { 
 
    grid-column: 1/2; 
 
    /* grid-column: 1/-1; If I switch to this, this div will span the full width of the grid, which is exactly what I'm trying to do with rows*/ 
 
} 
 

 
.tertiary { 
 
    grid-column: 1/2; 
 
} 
 

 
.secondary { 
 
    grid-column: 3/3; 
 
    grid-row: 1/-1; 
 
    /* Doesn't work */ 
 
    /* grid-row: rows-start/rows-end; Doesn't work */ 
 
    /* grid-row: 1/rows-end; Also doesn't work */ 
 
    /* grid-row: 1/span 7; This works, but I need to span an unknown number of rows*/ 
 
    /* grid-row: 1/span 99; This is gross and creates 99 rows */ 
 
}

<div class="container"> 
 
    <div class="secondary">Secondary - why doesn't this span all the way to the bottom of the grid?</div> 
 
    <div class="tertiary">Tertiary</div> 
 
    <div class="tertiary">Tertiary</div> 
 
    <div class="tertiary">Tertiary</div> 
 
    <div>Primary</div> 
 
    <div>Primary</div> 
 
    <div>Primary</div> 
 
    <div class="pop">Span tertiary and primary</div> 
 
    <div>Primary</div> 
 
    <div class="tertiary">Tertiary</div> 
 
    <div>Primary</div> 
 
    <div>Primary</div> 
 
</div>

Answer 1

有你的方式兩個障礙。

首先，該行的CSS代碼在你.container規則：

grid-template-rows: repeat(auto); 

此代碼是無效的。 repeat()表示法中的參數必須以正整數開始，該整數指定重複次數。你沒有，所以代碼不起作用。在spec的更多細節。

其次，即使上面的代碼是正確的，讓我們說：

grid-auto-rows: auto; (which happens to be the default setting anyway) 

你列仍然不能跨越所有行。

這是因爲，正如您在the other answer you cited中看到的那樣，可以將軌道定義設置爲僅覆蓋顯式網格中的所有垂直軌道。

所以這會工作：

grid-template-rows: repeat(6, auto); 

revised demo

問題的其餘部分中詳細說明了the other answer you cited。