如何重複網格模板的行所有行

Question

我想在我的網格塊創建行的模板：

grid-template-rows: repeat(3, 150px); 

我知道，這個模板應該是前三行工作。 但是，從4行此模板不起作用。
我可以爲所有行製作模板嗎？

P.S. 此模板僅適用於第一行。

grid-template-rows: 150px; 

Answer 1

使用grid-auto-rows（自動生成的行），而不是grid-template-rows（手動生成的行）。在目前的情況下，grid-auto-rows: 150px將訣竅。演示：

.grid { 
 
    display: grid; 
 
    grid-auto-rows: 150px; 
 
    /* space between columns for demo */ 
 
    grid-gap: 10px; 
 
} 
 

 
/* just styles for demo */ 
 
.grid__item { 
 
    background-color: tomato; 
 
    color: white; 
 
}

<div class="grid"> 
 
    <div class="grid__item">One</div> 
 
    <div class="grid__item">Two</div> 
 
    <div class="grid__item">Three</div> 
 
    <div class="grid__item">Four</div> 
 
    <div class="grid__item">Five</div> 
 
    <div class="grid__item">Six</div> 
 
    <div class="grid__item">Seven</div> 
 
    <div class="grid__item">Eight</div> 
 
    <div class="grid__item">Nine</div> 
 
</div>