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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

网格容器中的无限行

1 个答案: