グリッドコンテナに行ではなく列を埋めるようにする

Question

<p>グリッドを次のように垂直に埋めたいと思います: </p> <pre class="ブラシ:php;ツールバー:false;">1 4 7 2 5 8 3 6 9 ... 任意の数の追加行。</pre> <p>代わりに、次のように水平に塗りつぶされます: </p> <pre class="ブラシ:php;ツールバー:false;">1 2 3 4 5 6 7 8 9</pre> <p><strong>行数ではなく、グリッド内の列数を指定したいと考えています。 </strong></p> <p>これは、インライン CSS スタイルを使用した場合の div の外観です。</p> <p><br /></p> <pre class="snippet-code-html lang-html prettyprint-override"><code><div style="display:grid; Grid-template-columns:1fr 1fr 1fr;">

1

2

3

4

5

6

7

8

9

</div></code></pre> <p><br /></p> <p>グリッドの幅が 3 列であることが重要ですが、項目を行ではなく列に埋めたいと考えています。これはCSSグリッドで可能ですか？これ https://css-tricks.com/snippets/css/complete-guide-grid/ を読みましたが、順序については何も表示されません。 </p> <p>CSS Flexbox には <code>flex-direction</code> がありますが、CSS Grid にも同様のプロパティはありませんか? </p>

Answer 1

必要に応じて新しい列を作成し、行が定義されていない垂直方向に流れるグリッドの場合は、CSS 複数列レイアウト (例 ) の使用を検討してください。 CSS グリッド レイアウト (少なくとも現在の実装 - レベル 1) では、この操作タスクを実行できません。質問は次のとおりです:

CSS グリッド レイアウトの grid-auto-flow および grid-template-rows / grid-template-columns プロパティ。

より具体的には、grid-auto-flow: row (デフォルト設定) と grid-template-columns の両方が定義されている場合、グリッド項目を水平方向に配置できます。必要に応じて新しい行を作成します。この概念は、質問のコードで説明されています。

リーリー リーリー

ただし、grid-template-rows に切り替えると、グリッド項目は 1 列に積み重ねられます。

リーリー リーリー

grid-auto-flow: row および grid-template-rows を使用しても、列は自動的に作成されません。 grid-template-columns を定義する必要があります (したがって、grid-auto-flow と逆の関係になります)。

リーリー リーリー

逆の場合も同じ動作になります。

grid-auto-flow:column と grid-template-rows を定義すると、グリッド項目が垂直方向にうまく流れ、必要に応じて新しい列が自動的に作成されます。

リーリー リーリー

ただし、grid-template-columns に切り替えると、グリッド項目が 1 行に積み重ねられます。 (これは、この質問も含め、ほとんどの人が尋ねる質問です。)

リーリー リーリー

行は自動的には作成されません。これには、grid-template-rows を定義する必要があります。 (これは最も一般的に提供されるソリューションですが、レイアウトの行数が可変であるため、通常は拒否されます。)

リーリー リーリー

したがって、前述のように、複数列レイアウト ソリューションの採用を検討してください。

仕様参照: 7.7。自動配置: grid-auto-flow プロパティ