メイクグリッド項目は、私は私のグリッドが垂直に記入したい行

Question

列ではなく埋める：代わりにそれの

1 4 7 
2 5 8 
3 6 9 

は、水平方向に記入：

私は数を指定したい私のグリッドで

1 2 3 
4 5 6 
7 8 9 

列の数ではなく、行の数です。

は、これは私のdiv要素が見えるものです：

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

<div class="grid"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
</div>

Answer 1

当初、グリッドは、水平方向の項目をレイアウトします。これは、グリッドコンテナの初期設定がgrid-auto-flow: rowであるためです。あなたのレイアウトで取得しているものだ

：あなたはgrid-auto-flow: columnに切り替えると

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    grid-auto-flow: row; /* default setting; can be omitted */ 
 
}

<div class="grid"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
</div>

、その後、グリッド項目は、垂直方向にレイアウトされています。

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    grid-auto-flow: column; 
 
}

<div class="grid"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
</div>

あなたに実行し、問題が定義された行がない、とあなたは列の区切りが発生する場所コンテナが推測できないということです。したがって、デフォルトでは単一の行の後に折り返しが行われ、必要に応じて新しい列が追加されます。

希望するレイアウトを実現するには、ラップする場所をコンテナに伝える必要があります。

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    grid-auto-flow: column; 
 
    grid-template-rows: 25px 25px 25px; 
 
}

<div class="grid"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
</div>

スペックから：

7.7. Automatic Placement: the grid-auto-flow property

このプロパティは、自動配置の項目が流さ取得方法を正確に指定して、自動配置アルゴリズムがどのように動作するかを制御しますグリッドに入れる。

row

自動配置アルゴリズムは は、必要に応じて新しい行を追加する、順番に各行を充填することにより、アイテムを置きます。 rowもcolumnも でない場合は、rowとします。

column

自動配置アルゴリズムは、必要に応じて新しい列を追加する、 順番に各カラムを充填してアイテムを配置します。行数を指定する必要はありませんCSSグリッドの代替ソリューションについては、

、CSS列を試してみてください。https://stackoverflow.com/a/44099977/3597276