web-dev-qa-db-ja.com

すべての行に対してgrid-template-rowsを繰り返す方法

グリッドブロックの行のテンプレートを作成しようとしています。

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

このテンプレートは最初の3行で機能するはずです。ただし、4行からこのテンプレートは機能しません。
すべての行のテンプレートを作成できますか？

追伸このテンプレートは1行目でのみ機能します。

grid-template-rows: 150px;
csscss-grid
19
Dmitriy Doronin

使用する 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>
24
Vadim Ovchinnikov