grid-template-rows: Repeat(auto-fill, 80px) 可以與 grid-auto-rows: 80px 互換使用嗎？

Question

我希望網格在添加動態內容時根據需要添加更多行。

這就能解決問題：

.grid {
  display: grid;
  grid-template-rows: 80px;
  grid-auto-rows: 80px;
//  grid-template-rows: repeat(auto-fill, 80px);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-gap: 60px 60px;
}

我想知道是否可以用grid-template-rows:repeat(auto-fill, 80px);來取代grid-auto-rows: 80px ？

Answer 1

嗯，grid-template-rows: Repeat(auto-fill, 80px); 是根據 規格，但它沒有給出所需的結果。相反，它只是創建一個高度為 80 像素的顯式行，並且其他行會自動調整大小。

但是，由於您希望根據需要添加行，即隱式創建的網格行，因此您應該使用grid-auto-rows 並且無需使用grid -template-rows。

.grid {
  display: grid;
  grid-auto-rows: 80px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 60px;
  }

.grid div {
  background-color: silver;
}

<div class="grid">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>