グリッドコンテナ内の無制限の行

Question

無限の数の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[№] { grid-row: "row №" }を各divに手動で設定することはできません。

Answer 1

グリッドの各項目が行全体を占めるようにするには、基本的には1列のグリッドコンテナを要求しています。 grid-template-columns: 1frで

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