Editor X：FlexBox とグリッドベースのツールのどちらかを選択する

Editor X には、要素を整理するために使用できるさまざまなレイアウトツールが用意されており、これらはすべて異なる目的に使用できます。これらのツールは、実際には 2つの一般的な CSS テクノロジー（グリッドと FlexBox）に基づいています。複雑な構成を計画する場合は、これらのテクノロジーを念頭に置いておくことが重要です。

グリッドは Editor X にもある 2次元 CSS モデルで、2次元とは列と行のことです。規模の大きいレスポンシブレイアウトをデザインする場合、グリッドは、事前定義されたセル内に配置される要素の構造を制御するのに役立ちます。

Editor X のグリッド要素は実際の CSS グリッドなので、レスポンシブな動作を定義しながら複雑なレイアウトを作成できます。各ブレイクポイントのカラム（列）/ 行の数またはサイズを選択して、構成が常にピクセルパーフェクトになるようにすることができます。

カラム、行、余白のサイズを設定する際、多様な固定および流動的な測定方法が使用できます。

コンテナは、構成を作成するための最も基本的なレイアウトツールです。このコンテナボックスに要素を追加すると、自動的にその要素が親パーツとなり、その構造を定義します。これは、セクションよりも小さくなる「独立した」構成を作成するのに最適なツールです。

ページセクションもコンテナであるため、それに接続されている子パーツの構造を定義します。セクションにグリッドを適用するか、必要に応じて要素を配置するかを選択できます。

FlexBox は 1次元 CSS モデルで、Editor X のほとんどのレイアウトツールで使用されています。これらのツールでは、要素は親パーツのスペースに合わせて自動的に調整（＝フレックス）され、テキストのラッピング、スペースを埋めるような拡大、スペースに収めるような縮小操作ができます。

スタックは、縦方向に並べられた要素を保持する透明なフレックスコンテナです。たとえば、複数のテキストボックスを積み重ねたり、テキスト要素とその下にボタンを配置したりできます。スタックすることで、パーツ間の余白を確保し、小さな画面でパーツが重ならないようにします。

レイアウターは複数のアイテムをお好みのレイアウトで保持するフレックスコンテナです。レイアウターアイテムはコンテナなので、フリーな構成に要素を追加したり、より構造化したい場合はグリッドを適用することができます。

表示タイプ（例：スライダー、モザイク、カラムなど）を選択するだけで、レイアウターが残りの作業を行います。すべてのブレイクポイントでアイテムがラップされ、見栄えが良くなります。一方で、ビューポートごとに異なる表示タイプを選択することもできます（例：スライダーレイアウトはモバイルデバイスに最適です）。

リピーターは複数のアイテムをお好みのレイアウトで保持するフレックスコンテナです。すべてのアイテムのレイアウトとデザインは同じで、リストのようにコンテンツが異なる場合に最適です。レイアウトとデザインの調整は自動的に行われるため、まとまりを気にする必要はありません。

リピーターの特徴は、コンテンツコレクションに接続できることです。これにより、実際のデザインに影響を与えることなく、バックエンドからコンテンツを管理・更新することができます。

ツールを選択する前に、各画面サイズに適したレイアウトを計画してください。その上で、必要な機能を備えたレイアウトツールを選択できます。

Editor X のレイアウトツールの主な違いについては、以下をご覧ください：