Elementor のコンテナには、フレックスボックスとグリッドの 2 つのレイアウトモードがあります。どちらになるかは、クラス名ではなく、ブラウザーが実際に要素に対して算出する display の値によって決まります。
display:flex → フレックスボックスのコンテナ
コンバーターは、方向（row / column）、折り返し、justify-content、align-items、ギャップ（gap）という重要なプロパティを引き継ぎます。そのため、Flexbox で構築された横並びのカード行は、「方向」が row で、CSS で指定していたのと同じギャップを持つコンテナとして変換されます。
display:grid → グリッドのコンテナ
グリッドレイアウトはグリッドのコンテナになり、エディターの構造パネルではグリッドアイコン付きでグリッドと表示されます。列、行、ギャップ、アイテムの配置オプションが引き継がれます。
等しい列は fr のまま維持
これは理解しておく価値があります。ブラウザーは grid-template-columns: repeat(5, minmax(0, 1fr)) を具体的なピクセル値（例えば 241.597px 241.597px 241.604px …）に解決します。サブピクセル単位のわずかな差があることに注意してください。もしコンバーターがこれらの文字列を単純に比較したら、列は等しくないと判断して固定ピクセル幅を書き出し、グリッドのレスポンシブ性が失われてしまいます。
代わりに、列は許容誤差の範囲内で数値的に比較され、ほぼ同一のトラックは等しいと認識されて N fr として書き出されます。コンテナのサイズ変更に応じて再配置される、本物のレスポンシブなグリッドになります。実際に不均等なトラック（例えば 2fr 1fr）はカスタムテンプレートとして保持されます。
行はコンテンツに合わせてサイズ調整
行は Elementor のデフォルトである等高ではなく auto に設定されます。そのため、テキストの長さが異なるカードは、最も高いカードに合わせて伸ばされるのではなく、自然な高さを保ちます。
幅、パディング、中央配置の落とし穴
非常によくあるパターンとして、中央に配置されたコンテンツ列があります：max-width: 760px; margin: 0 auto;。ここでブラウザーは auto を現在のビューポートに応じた実際のピクセル値に解決します。ある幅では各側が 260px と報告されるかもしれません。
そのピクセル値を Elementor に書き込むと、画面サイズが変わった瞬間に中央配置が崩れてしまいます。そこで、max-width と左右対称の auto マージンを持つブロックは 自動中央配置 として検出され、代わりに Elementor 流に表現されます。つまり、コンテンツ幅 = ボックス に max-width を指定する形になり、どの画面サイズでもネイティブに中央配置されます。解決された左右マージンは破棄されます。
列数は推測ではなく、各ブレークポイントで計測される
デスクトップでは 4 列、タブレットでは 2 列を表示するグリッドは、単に縮小された 1 つのレイアウトではなく、幅ごとに異なる値です。デスクトップのレンダリングだけを見るコンバーターでは、残りを見落としてしまいます。
そのため、ページは複数回計測されます。各ブレークポイントの幅でレイアウトが再度読み取られ、その幅での列数が、そのデバイス向けの Elementor のレスポンシブ設定欄に書き込まれます。デフォルト設定では、820px と 390px の 2 回の追加計測が行われます。これらは典型的な縦向きタブレットと典型的なスマートフォンに相当し、結果は Elementor 標準のタブレット（1024px まで）とモバイル（767px まで）のフィールドに入ります。各範囲の上限ではなく実際のデバイス幅で計測することが重要です。760px や 640px の手書きメディアクエリは 767px では発動しないため、その幅での計測ではほとんどのモバイルレイアウトを見逃してしまいます。
拡張ブレークポイントを有効にすると、ラップトップ 1280px、タブレットエクストラ 1100px、タブレット 960px、モバイルエクストラ 820px、モバイル 390px の 5 回計測されます。これは、Elementor のサイト設定でそれらのブレークポイントを有効にしている場合にのみ使用してください。オフになっているデバイス向けの値を書き込むと、後でスクロールして読み飛ばさなければならないノイズが増えるだけです。
非表示要素は削除ではなく非表示
display: none または visibility: hidden と算出される要素は、ちょっとした落とし穴です。それらは見えないため、コンバーターはそれらをスキップすべきだと考えがちですが、モバイル専用メニュー、オフキャンバスパネル、デフォルトで閉じているモーダルなどは、変換時点では見えなくてもデザインの一部です。
それらは変換され、削除される代わりに Elementor の デスクトップで非表示 レスポンシブフラグが付与されます。コンテンツは維持されるので、後でそれが適切かどうかを判断できます。キャンバス上で期待していた要素が見つからない場合は、失われたと決めつける前にレスポンシブ表示設定のトグルを確認してください。
まったく対応するものがないレイアウト
Elementor に同等のものがないソースパターンが 3 つあります。変換後に知るより、変換前に知っておく方が良いでしょう。
- float ベースのレイアウト。 Elementor のコンテナには float の概念がないため、float を読み取る仕組みはありません。
float: leftで構築された古い 2 列レイアウトは、積み重なったブロックとして変換されます。これは、マークアップが Flexbox より前の時代のものであり、ソースの段階で最新化する価値があるという最も明確なサインです。 - テーブルレイアウト。 事情は同じです。レイアウト用のテーブルはデザインではなく構造であり、列ではなく入れ子になったブロックとして変換されます。
- 名前付きグリッドエリア。
grid-template-columnsは変換されますが、grid-template-areasは変換されません。Elementor のグリッドには名前付き領域に相当するものがないためです。子要素はソースの順序にフォールバックします。
インポート後に適切なモードを選ぶ
変換結果は最終的なものではありません。コンテナのレイアウトモードは Elementor のドロップダウンで切り替えられ、切り替えても子要素は保持されます。そのため、セクションがフレックスボックスとして変換されても、グリッドとして管理したい場合は、モードを変更して列を設定できます。2 つの大まかな目安があります。
- 子要素が縦横両方向に整列するべき場合はグリッド — カードデッキ、機能マトリックス、画像ギャラリーなど、2 行目が 1 行目と揃うことを重視するもの。
- 子要素が一方向に流れ、サイズがコンテンツ主導の場合はフレックスボックス — ナビゲーションバー、ボタングループ、バッジの横にある見出し、メディアオブジェクトの行など。
コンバーターはソースに一致する方を選択します。これは正しいデフォルトです。しかし、ソースのマークアップは意図的な決定ではなく習慣の結果であることが多く、作者がいつも Flexbox を使うからという理由で Flexbox で構築されたレイアウトは、実際にはグリッドである可能性もあります。
実用的なヒント
- グリッド / Flexbox の子要素間のマージンよりも
gapを優先してください。gap はきれいにマッピングされますが、子要素ごとのマージンはそうではありません。 - 中央配置のセクションには
max-width+margin:0 autoを使用してください。「ボックス」のコンテナに正しく変換されます。 - float と flex / grid を混在させないでください。float には Elementor に同等のものがなく、手作業が必要になります。
- 行をモバイルで折り返したくない場合は、インポート後に Elementor で設定してください。レスポンシブの折り返し動作は、Elementor で調整する方が簡単です。
- 拡張ブレークポイント設定は、実際に Elementor で有効になっているものと一致させてください。そうしないと、サイトで使用していないデバイス向けのレスポンシブ値が作成されます。