Können „grid-template-rows: Repeat(auto-fill, 80px)' austauschbar mit „grid-auto-rows: 80px' verwendet werden?

Question

Ich möchte, dass das Raster beim Hinzufügen dynamischer Inhalte nach Bedarf weitere Zeilen hinzufügt.

Dies wird das Problem lösen:

.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;
}

Ich möchte wissen, ob ich grid-template-rows:repeat(auto-fill, 80px);来代替grid-auto-rows: 80px verwenden kann?

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>