网格容器中的无限行

我希望每个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 №" }。

来源

2017-08-16 Achive Archive

如果你想让每个网格物体占据整个行，那么基本上你需要一个单列网格容器。

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>

来源

2017-08-16 01:22:59

网格容器中的无限行

回答

相关问题