网格容器中的无限行

Question

我想显示无数个 div。

我希望每个 div 都在新行上。

例如，我现在在包装器中设置：

wrap {
   display: grid;
   grid-template-rows: repeat(4, [row] 25px);
}

对于我设置的每个 div：

div1 { grid-row: "row" },
div2 { grid-row: "row 2"}

....等等...

如何在 CSS 中处理它？如果我有 99999 个 div 怎么办？我不能手动为每个 div 设置div[№] { grid-row: "row №" }。

Answer 1

如果您希望每个网格项占据整行，那么基本上您要求的是单列网格容器。

grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
  <grid-item>4</grid-item>
  <grid-item>5</grid-item>
  <grid-item>etc.</grid-item>
</grid-container>

使用grid-template-columns: 1fr，您将容器设置为占据所有可用空间的单列。

您可以使用grid-template-rows 属性创建行。这些行将是explicit grid 的一部分，这意味着这些行已被定义。

但是，如果您不知道会有多少行，网格算法可以根据需要创建行。这些行是implicit grid 的一部分，这意味着这些行尚未定义并且是自动创建的。

如果要为隐式行设置高度，请使用 grid-auto-rows 属性。

grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 25px;
  grid-row-gap: 10px;
}


/* non-essential */
grid-container {
  height: 100vh;
  background-color: lightyellow;
}
grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgreen;
}
body {
  margin: 0;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
  <grid-item>4</grid-item>
  <grid-item>5</grid-item>
  <grid-item>etc.</grid-item>
</grid-container>