AI に「CSS Grid で書いて」と指示したら、Flexbox よりデザインの再現精度が上がった話

AI が書くコードはほぼ 100% Flexbox になります。CSS Grid を見かけるのは記事一覧ぐらいです。個人的には CSS Grid の方が親要素を見るだけでレイアウトの全体像がわかり、保守しやすいので、Grid で書いてほしいところなのですが…。AI にまかせる以上、この Flexbox 偏重も受け入れるしかないのかも、と感じるようになっていました。

ただ、前回の記事で AI 自身にコーディングについて語ってもらったこともあり、「実際のところ AI ににとっての Flexbox と CSS Grid ってどうなの？」と疑問に思い、デザイン画像を元にコーディングしてもらう実験を行いました。

結果は、特別な「制約なし」で頼んだコードは Flexbox 100% になりました。レイアウトが多少緩い結果になったのも含め、これは想定内でした。

想定外だったのは、「Grid 制約あり」のケースです。CSS Grid で書いてもらったコードの方が、Flexbox よりもデザインの再現精度が高い結果になったのです。

この結果は想定外でしたが、改めて Flexbox と Grid の特性を考えると、むしろ当然の結果だったかもしれません。1つずつ、見ていきます。

AI コーディング実験の内容と結果

実験のために用意したのは、次のデザイン画像です。あえて少し複雑なレイアウト構造にしています。

この画像をAIに渡し、コーディングしてもらいました。ここでは、Claude Opus 4.6 に依頼した結果を見ていきます。

「制約なし」の Flexbox 版ではレイアウトが緩い結果に

「制約なし」では特別なルールは設けず、次のプロンプトでコーディングを依頼しました。

1
添付画像のレイアウトをHTMLとCSSで作ってほしいです。グレーの矩形は画像です

結果は以下の通りです。レイアウトはすべて Flexbox で記述されました。ラベルの横幅が揃っていないのと、予約特典の要素下部が揃ってないことが気になります。

参考：CodePen https://codepen.io/ebisucomtechlab/pen/zxKVeVZ

「Grid制約あり」の CSS Grid 版ではレイアウトの再現精度が向上

「Grid制約あり」では CSS Grid で書いてもらうため、次のプロンプトでコーディングを依頼しました。

1
添付画像のレイアウトをHTMLとCSSで作ってほしいです。グレーの矩形は画像です。
2
なお、CSSは**親要素だけでレイアウトの全体像が把握できる形で書いてほしい**です。
3
そのため、CSS Gridを優先的に使用してください。
4
特に、子要素へのサイズ指定（flex-grow, flex-shrink, flex-basis）が必要な場合はFlexboxを使わず、Gridを使用してください。

現在の AI はとにかく Flexbox への偏重が大きいため、指示の中にはCSS Gridを使う理由（親要素だけでレイアウトの全体像が把握できる形にしたいから）を明確に入れています。

その結果は以下の通りです。レイアウトはすべて CSS Grid で記述されました。ラベルの横幅や要素下部も揃っており、レイアウトの再現精度が高くなったことがわかります。

参考： CodePen https://codepen.io/ebisucomtechlab/pen/OPReGpW

CSS Grid 版では HTML の構造もフラット化

さらに、CSS Grid 版では、HTMLの階層構造自体が Flexbox 版よりもフラットになる傾向も見られました。たとえば、「予約特典」の部分は次のような階層構造になっています。

Flexbox版： .benefit-reservation > .benefit-content > div > .benefit-title (4階層)
CSS Grid版： .benefit-reservation > .benefit-title (2階層)

AI のモデルを変えても結果の傾向は同じ

Claude Opus 以外にも、Claude Sonnet、 ChatGPT、Gemini などで試しましたが、AI のモデルを変えても結果の傾向は同じでした。

Flexbox版でもレイアウトが再現されるケースはありました。しかし、間隔調整に margin が使われたり、テーブルレイアウトが使用されることもあるなど、「古い学習データ」の影響が顔を出すのが気になります。

対照的に、CSS Grid版は再現精度が安定し、間隔調整には gap が使用されるなど、モダンな実装になる印象です。

Grid制約ありの方がレイアウト再現精度が高い理由

なぜ Grid 制約ありの方が再現精度が高くなるのか。実際に AI が書いたコードを見比べてみます。

レイアウトの全体像を把握したいときにどこを見るか

たとえば、先ほどの「ラベルとテキスト」のレイアウトに問題があったとします。デバッグのために、どこを見るでしょうか？

▼ Flexbox版のコード
Flexbox版では、親要素の display: flex で Flexbox の使用が宣言されています。ですが、それだけです。詳細は子要素ごとに設定された flex-shrink: 0、width: 220px、margin-right、flex: 1 を見ないと把握できません。つまり、レイアウトを把握するのに3つの要素を確認する必要があります。

1
.venue-row {
2
  display: flex; 　　　/* Flexbox の宣言 */
3
  align-items: flex-start;
4
}
5
.venue-label {
6
    flex-shrink: 0;     /* 縮小防止 */
7
    width: 220px;       /* 子要素側で横幅を固定 */
8
    margin-right: 30px; /* 間隔はmarginで調整 */
9
}
10
.venue-details {
11
    flex: 1;            /* 残りのスペースを配分 */
12
}

▼ Grid版のコード
Grid版では、親要素を見れば「Gridの使用が宣言され、左は220px、右は残りスペース、間隔は20px」ということがわかります。つまり、レイアウトは親要素 1 つを見れば把握できます。

1
.section-exhibition {
2
    display: grid; 　　　　　　　　　　　　/* CSS Grid の宣言 */
3
    grid-template-columns: 220px 1fr;  /* これだけで構造が完結 */
4
    gap: 20px;　　　　　　　　　　　　　　 /* 間隔もわかる */
5
    align-items: center;
6
}

Flexbox と Grid の根本的な違い

コードを見比べてみると、レイアウト構造は Flexbox だと「親と子の全要素を見ないとわからない」、Grid だと「親要素を見ればわかる」ことが見えてきます。これらの違いは、両者の設計思想に起因します。

Flexbox：フロー型。子要素どうしの相互作用（Claude Opusが言うところの「暗黙の挙動」）でサイズや配置が決まっていく
CSS Grid：俯瞰・座標型。親要素で全体のレイアウト構造を定義する

実験でGridの方が再現精度が高くなったのも、私が「Gridの方が保守しやすい」と感じるのも、この設計思想の違いが根本にあります。そしてこれは、人間にとってだけでなくAIにとっても同じだと思います。

Claude Opus に AI の立場からの意見を求めたところ、とても参考になる見解が返ってきましたのでそのまま引用します。

この違いは、AIの推論プロセスの観点から重要です：

Gridは「設計図」を先に描く方式 — grid-template-columns を書く時点で、AIは全体の空間配分を1回の判断で決定できる

Flexboxは「個々の要素の振る舞いの積み上げ」方式 — 各子要素に flex-grow, flex-shrink, flex-basis, width, margin を設定し、それらの相互作用の結果としてレイアウトが決まる

AIにとっては、「全体像を一度に宣言する」方がエラーの入る余地が少ない のは当然です。Flexboxだと、子要素Aのmarginと子要素Bのflex-basisの兼ね合いで意図しない結果が生まれるリスクがあり、その「シミュレーション」をAIが正確にできる保証がありません。

― Claude Opus 4.6

もう一つの実験結果：小さい単位で渡せば Flexboxでも精度は出る

今回の実験では、デザインを小さい単位で AI に渡し、同じプロンプトでコーディングを依頼することも試しています。たとえば、「ラベルとテキスト」部分のデザインだけを渡すと、「制約なし」の Flexbox版でもレイアウトが崩れることはなく、再現精度が安定しました。

これは、「AI にはできるだけ小さい単位で処理させた方が精度が上がる」というベストプラクティスと同じ現象と考えられます。Claude Opus に意見をきいたところ、次のような見解が返ってきました。

理由をもう少し掘り下げると：

AIにとって「デザイン画像→コード」のタスクは、画像の空間的な情報を、コードの論理的な階層構造に変換する作業です

画像の情報量が増えると、AIは「どの要素がどの要素と同じ階層にあるのか」「どの要素がどの要素のサイズに依存しているか」といった構造的な関係性の推論を同時に大量にこなさなければなりません

小さい単位なら、推論すべき関係性の数が少ないため、Flexboxでも「暗黙の挙動」が問題になりにくい

つまり、Flexboxの問題は「タスクが小さければ顕在化しない」 というだけで、Flexboxの本質的な弱点（暗黙のサイズ決定）が解消されているわけではありません。小さい単位の実験でたまたま精度が出たのは、変数が少なかったからです。

― Claude Opus 4.6

これは、小さいコンポーネント単位で形にする段階では問題なかったFlexboxのコードも、カスタマイズや改修を繰り返すような運用の過程で問題が顔を出す可能性があるということです。実際、Flexbox版のコードは一見きれいに見えても、半々ぐらいの確率で gap ではなく margin での間隔調整が紛れ込む印象でした。こうした設定が積み重なったCSSは、正直触りたくない（触らせたくもない）というのが本音です。

「CSS Grid優先」で AI にコーディングしてもらうには

デザインの再現精度が高くなり、将来的な問題も Flexbox より起きにくいとなると、AI には CSS Grid を優先して使てもらいたいところです。

ただ、現実的には AI の書くコードのほとんどが Flexbox になります。理由はたくさんあります。

Flexbox は 2013年ごろから使われてきたので、学習データが圧倒的に多い（margin を使った古いテクニックの学習データも多い）
CSS Grid が本格的に使われるようになったのは、IE 退場後の 2022年以降。そのため、元になる学習データが圧倒的に少ない
CSS Grid には「IE対応が必要なら避けよう」という文脈まで付いている
学習系の情報源でも「1次元、2次元」での使い分けしか解説していない
Tailwind CSS は Grid が苦手。等分割以外のグリッド構造は角括弧記法（Arbitrary Values []）での記述が必要になる
Figma のオートレイアウトも Flexbox ベース

このように、Grid は圧倒的に弱い状況です。AI に判断の余地を残すと、ほとんどが Flexbox になるのも納得です。とはいえ、「CSS Grid 優先」とだけ指示すると、AI はすべてを Grid で書こうとします。

コーディングルールを作る際は、「CSS Grid 優先」に加えて、「Flexboxを使っていいケース」を加えておくのがよさそうです。最低限、「Flexbox でも親だけでレイアウトが把握できるケース」を許容するなら、次のようなルールになります。

1
CSSは**親要素だけでレイアウトの全体像が把握できる形で書くこと**。
2
そのため、**CSS Gridを優先的に使用する**こと。
3
特に、子要素へのサイズ指定（flex-grow, flex-shrink, flex-basis）が必要な場合はFlexboxを使わず、Gridを使用すること。
4

5
【Flexboxを使っていいケース】
6
- サイズ指定が不要な要素を横並びにするレイアウト
7
- フロー（テキストのような流れ）で折り返しを入れながら要素を並べるレイアウト
8
- ２つの要素を両端に配置するレイアウト

ちなみに、上記のうち Grid で実現困難なレイアウトは「フローで折り返す並び」だけです。Grid では 1 次元も 2 次元も実現できます。Flexbox と Grid の境界をどこに置くかは、プロジェクトやチームの好みなどに応じてうまく調整したいところです。

AI で Flexbox や Grid について学習する場合はハルシネーションに要注意

前述のように、AI の学習量は Flexbox が圧倒的です。AI に Flexbox と Grid の使い分けを聞くと、「1次元、2次元」と答えます。Grid の方がシンプルになるレイアウトでも、Flexbox を勧められます。へたをすると、「これは Grid では実現できない」と言い出します。

こちらが「Grid だとこう書けるよね」「Grid でも実現できるよね」と指摘すると、「Grid でも書けます」「Grid の方が簡単でした」などと認めます。でも、会話しているうちに「Flexbox の方がいいです」と最初に戻ります。学習データの偏りが大きすぎるのです。

ですので、こちら側が AI にツッコミを入れることができないと、AI の Flexbox 推しに押し負けます。これは注意が必要です。

最後に

とても強力で、AI にとっても強力なのに、不遇なままの CSS Grid。Flexbox より学習量が少ないからといって、AI の Grid の知識量に不足はありません。AI にまかせれば Grid の記述も楽になります。

ちょっと Flexbox 偏重を受け入れる方向に気持ちが傾きかけていたのですが、今回の実験を通して、「AI には積極的に CSS Grid で書いてもらおう」という決心がつきました。AI 時代だからこそ、もっと CSS Grid が使われるようになればいいなと思います。

Table of Contents