私は私のグリッドブロック内の行のテンプレートを作成しようとしているすべての行

Question

用グリッドのテンプレート行を繰り返す方法：

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

私が知っている、このテンプレートは、最初の3行のための仕事でなければなりません。 ただし、から4行このテンプレートは機能しません。
すべての行に対してテンプレートを作成できますか？

P.S. このテンプレートは1行目でのみ動作します。

grid-template-rows: 150px; 

Answer 1

使用grid-auto-rows（自動的に生成された行）の代わりに、grid-template-rows（手動で生成された行）。現在のケースではgrid-auto-rows: 150pxがそのトリックを行います。デモ：行に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>