エレメントパネルで Flexible Grid を選択し、ページにドラッグ＆ドロップします。フレキシブルグリッドは通常のグリッドと異なり、デスクトップ、タブレット、モバイルで別々のレイアウトを設定でき、異なる画面サイズに自動で調整されます。

各ビュー（デスクトップ、タブレット、モバイル）で Columns と Gap を調整します。 これにより、各デバイスでのレイアウト表示をコントロールし、レスポンシブでバランスの取れたデザインを実現できます。

まずデスクトップビューで Columns (Desktop) と Gap (Desktop) を設定します。 ●　Columns (Desktop) – デスクトップレイアウトの合計列数 (最大 12)。セルが均等に収まる数を選択します。例: 12 列で 3 つの同等セル (4+4+4)、2 セル (6+6)、または大きなアイテムをハイライト (8+4) する場合など、バランスを保てます。 ●　Gap (Desktop) – セル間の間隔。大きくするとスペースが広がり、小さくすると詰まったレイアウトになります。

Columns (Desktop) と Gap (Desktop) を設定したら、セルを編集します。+ ボタンをクリックしてセルを追加します。 各セルにはテキスト、画像、ボタンを配置可能で、グリッド構造に従います。

各セルの Column Span (Desktop) を設定し、幅をコントロールします。 例：Columns (Desktop) = 12 の場合、均等配置なら4セルを span 3 に設定。spanを大きくするとセルが次の行に回り、レイアウトバランスが崩れることがあります。

タブレットビューに切り替え、画面サイズが小さい場合のレイアウトを調整します: ●　Columns (Tablet) – 最大 12 まで設定可能ですが、セルを読みやすく比率を保つために 4 を推奨。ハイライトは 2～3 列、その他の小さいアイテムは 1 列。 ※3 列または 6 列も用途に応じて設定可能です。 ●　Gap (Tablet) – セル間の間隔を調整し、列数が少なくてもバランスを維持します。

各セルの Column Span (Tablet) を入力します。 現在のビューで正確にプレビューできるように、各セルの span を割り当てます。 Columns (Tablet) = 4 の場合、最もバランスが良いのは 4 セルそれぞれ span 1。span を 1 より大きく設定すると、余分なセルが次の行に回り、レイアウトが不均衡になります。

モバイルビューに切り替え、次を調整します: ●　Columns (Mobile) = 2 – 狭い画面ではシンプルなレイアウトが最適。ハイライトは両列に span 2（フル幅）、小さいアイテムは span 1 で、全体を見やすく保ちます。 ●　Gap (Mobile) – セル間の間隔を調整して、列数が少なくてもバランスを維持します。 ※Mobile は最適表示用にプリセットされていますが、必要に応じて調整可能です。

各セルの Column Span (Mobile) を設定します。 デフォルトはバランス用にプリセットされていますが、必要に応じて変更できます。 Columns (Mobile) = 2 の場合、2セル均等なら span 1、フル幅ハイライトなら span 2 を使用し、レスポンシブレイアウトを維持します。