グリッドレイアウト設定

!注このトピックでは、以前にContent Editorで構築されたコンポーネントの設定方法を説明します。代わりにコンポーネントでプロトタイプされたコンポーネントについて知りたい場合は、コンポーネント ドキュメントをご覧ください。

ページビルダーでは、グリッドレイアウトの設定が、選択したプレースホルダー内のコンポーネントのサイズや位置に影響を与えます。

このヘッダーの下に表示される設定は、サイトが使用するグリッドによって異なります。デフォルトでは、グリッドレイアウトはBootstrap v5.0上で構築されており、12列で構成されています。

グリッドは画面幅やエディタービューで選択したデバイスの種類に基づいて6つのレスポンシブブレークポイントをサポートしています。つまり、各ブレークポイントごとに、エクストラスモール(スマートフォン画面)、スモール、ミディアム(タブレット)、ラージXL、XLLグリッドレイアウトの異なる設定セットで、コンテナやカラムのサイズや挙動をコントロールできます。

レイアウトグリッド構成は、より低いブレークポイントから継承できますが、変更することも可能です。

• 低いブレークポイントから継承されたものとは異なる カラムスパン 構成を選択するには、「 継承のオーバーライド」をクリックしてください。レイアウトに変更を加えると、現在およびそれ以上のブレークポイントに影響を与えます。
• カラムスパンの設定をデフォルト値に戻すには、サイズを継承するためにリセットをクリックしてください。

!注コンポーネントの列数を手動で設定する場合は、使用するすべてのデバイスタイプでレイアウトを確認することをお勧めします。

大きなサイズに設定しない場合は、最も近い小さいデバイスサイズの構成が使われます。例えば、未設定のデスクトップはタブレットのサイズが指定されていれば、タブレットの構成を使用します。タブレットが未設定の場合は、デスクトップはモバイルの構成を使用します。

以下のパラメータも設定可能です:

• サイズ - サイズ設定はエディターに表示されるグリッドサイズに依存します。以下は一般的な設定の一部です:
  • スクロールバーを使って、コンポーネントの幅として持てる列数を手動で設定します。スクロールバーが表示されない場合は、 上書きをクリックします。
  • コンテンツへの自動フィットは 、その中のコンテンツに応じてコンポーネントをできるだけ小さくします。
  • 自動入力の行や列は 、同じ領域に配置されている他のコンポーネントの数に応じて、自動的にコンポーネントをできるだけ幅広くします。
• オフセット - コンテンツを右に移動させる。スクロールバーを使って、コンテンツが何列オフセットされるべきかを示してください。
• 順序 - 同じコンテナ内に複数の要素がある場合の内容の視覚的な順序を制御します。
• コンポーネントアライメント - コンポーネントを他の部品と相対的に配置すべきかを定義します。
• Display - display CSSプロパティは、要素がブロック要素として扱われるかインライン要素として扱われるか、およびその子に使われるレイアウト(tableやflexなど)を設定します。クラスは様々な効果のために組み合わせられます。