網格容器中的無限行

我希望每個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

網格容器中的無限行

回答

相關問題