グリッド

Grid は、2 次元レイアウトを柔軟に実装できる Jetpack Compose API です。この API を使用すると、利用可能なコンテナサイズに適応する複数列または複数行のレイアウトでアイテムを表示できます。

Grid は、同様のコンポーザブルとどのように異なりますか？

Compose には、LazyVerticalGrid などの同様のコンポーネントがすでに用意されています。これらのコンポーネントは、主に大規模で同種のデータセットを可視化するためのものです（動画ストリーミング アプリでコンテンツ カタログを表示するなど）。これらのコンポーネントは、画面や複雑なコンポーネントの構造レイアウト向けに設計されていません。

複数の Row コンポーザブルと Column コンポーザブルを組み合わせて、2 次元レイアウトを実装することもできます。ただし、このアプローチには、階層が深くなる、適応性が低いなどのデメリットがあります。

次の表に、各 API に適したレイアウトの概要を示します。

コンポーネント	目的
LazyVerticalGrid、LazyStaggeredGrid、LazyHorizontalGrid	遅延読み込みが必要な大規模で均一なデータセットの可視化。
Row、Column、FlexBox	1 次元レイアウト
Grid	2 次元レイアウト

用語

Grid の仕組みを理解するには、次の用語を理解しておいてください。

グリッド線

グリッドは、水平方向と垂直方向に走る線で構成されています。グリッドに 3 つの行がある場合、最後の行の後の行を含めて 4 つの水平線があります。次の画像では、各点線がグリッド線を表しています。

グリッド トラック

グリッド トラックは、2 つのグリッドライン間のスペースです。 行トラックは 2 本の水平線の間にあり、列トラックは 2 本の垂直線の間にあります。これらのトラックのサイズを定義するには、グリッドの作成時にサイズを割り当てます。

グリッドセル

グリッドセルは、行トラックと列トラックの交点です。

グリッド領域

グリッド領域は複数のグリッドセルで構成されます。アイテムを複数のトラックにまたがらせることで、グリッド領域を定義できます。

グリッドのギャップ

グリッドギャップは、グリッド トラック間のガターです。UI 要素をギャップに配置することはできませんが、UI 要素をギャップにまたがって配置することはできます。