CSS グリッドレイアウトで列にアイテムを埋め込む方法

n 個のアイテムがあり、これらのアイテムをグリッド レイアウトの列に並べ替える必要があるとします。列の数は固定されており、グリッドを効率的に埋めるためには、グリッド レイアウトの行数が最小限であることも確認する必要があります。この記事では数字を項目として扱います。そして、要件に応じて、グリッド レイアウトに 1 ～ 13 の数字を配置します。列数は3に固定されています。 React と SCSS (Sassy CSS) を使用してこれをデモンストレーションします。

1. 列に並べる場合は、非常に簡単になります。 CSS を使用できます。コードは次のとおりです。

CSS 部分を含む完全なコードは次のとおりです。

出力効果

ご覧のとおり、数字は行に並んでいます。ここでは、グリッド項目が水平に流れ、必要に応じて新しい行が自動的に作成されます。グリッド項目のフローが列の末尾に達すると、新しい行が作成されます。これは、前の行が完全に埋められた場合にのみ次の行が開始されるため、行優先順序とも呼ばれます。

しかし、私たちの要件はアイテムを列に配置することなので、アイテムを列に配置するには、グリッド レイアウトの行数を知る必要があります。行数を知る必要がある理由を説明できます。行ごとの配置では、前の行が完全に埋められたとき（つまり、前の行の項目数が列の数と等しくなったとき）にのみ次の行が開始されます。

同様に、列ごとの配置では、前の列が完全に埋められたとき（つまり、前の列の項目数が行数と等しくなったとき）にのみ、新しい列が始まります。したがって、行がいくつあるかを知る必要があります。では、グリッド レイアウトで作成する行の数をどうやって知ることができるかという疑問が生じます。これは基本的な数学を通じて学ぶことができます...これで、グリッド項目の数と列の数もわかりました。したがって、行数を最小限に抑えるには、この式 Math.ceil(itemsCount/columnsCount) を使用できます。なぜ行数を最小限にする必要があるのでしょうか。行数として大きなランダムな整数を使用すると、グリッドが効果的に埋められず、レイアウト全体の一部のグリッドが埋められなくなるためです。次の CSS コードは列に配置されており、grid-template-rows フィールドを動的に設定する必要があるため、次のコードにはフィールドが存在しません。

CSS 部分を含む完全なコードは次のとおりです。

16 行目で行数が計算されていることがわかります。 17 行目では、grid-template-rows フィールドが動的に設定されます。

ここでは、数字が固定数の列 (3) で列に配置されていることがわかります。ここでも、最小化された行数は 5 です。 5行未満の場合は配置できません。行数が 5 を超えると、レイアウト内に埋められていない空きスペースが残ります。前の列が完全に埋められた場合にのみ、次の列が始まります。

結論

グリッド レイアウトに作成される行の数を計算し、それを動的に設定するというこのトリックにより、問題は非常に簡単に解決されます。列に配置する行数を知る必要があるため、この問題を解決するには、アイテムを配置するときに行数と列数の両方を知る必要があると言えます。注: レイアウトの幅 (列数ではない) が固定されている場合は、同じタイプのソリューションを使用できます。

CSS グリッドレイアウトで列にアイテムを埋める方法についての記事はこれで終わりです。CSS グリッドレイアウトでアイテムを埋める方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。