网格容器中的无限行
问题描述:
我想显示无数的div。网格容器中的无限行
我希望每个div都在新行中。
比如现在在包装我设置:
wrap {
display: grid;
grid-template-rows: repeat(4, [row] 25px);
}
和每个格我设置:
div1 { grid-row: "row" },
div2 { grid-row: "row 2"}
....等等
我怎么能在CSS中处理它?如果我有99999个div,该怎么办?我不能手动为每个div设置div[№] { grid-row: "row №" }
。
答
如果你想让每个网格物体占据整个行,那么基本上你需要一个单列网格容器。
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>