Google推奨CSSの書き方！FlexboxとGridの正解は？

「このCSSの書き方、これで合ってる？」
そう不安になること、ありますよね。

Google が、モダンなCSSの「やること・やらないこと」をまとめています。
この記事では、その中でも大事なポイントを、実際にブラウザで試して確かめました。

結論から言います。
Flexbox と Grid は、得意なことが違います。
そして「効くと思っていた指定が、実は効かない」場面があります。
編集部が Google Chrome 150 で、1つずつ実測しました（検証日 2026-07-12・Windows 11で確認）。

実際にブラウザで確かめた

検証した環境はこちらです。

項目	内容
OS	Windows 11 Home 10.0.26200
ブラウザ	Google Chrome 150.0.7871.102
検証日	2026-07-12

実測した結果を、先に表でまとめます。

試したこと	結果
justify-self: end で端に寄せる	Flexboxでは効かない（動かず）／Gridでは効く（右端へ300px移動）
長いURLのはみ出しを止める	overflow-wrap: anywhere で解消（min-width:0 だけでは止まらない）
auto-fit で列数を自動調整	画面幅1280pxで6列／768pxで3列／375pxで1列
gap で余白を作る	gap:24px なら、間隔はきっちり24px
subgrid でカードを揃える	ズレ0px（使わないと11px）※Chrome 150で確認
row-reverse で並びを逆に	見た目は逆でも、キーボードの順番はHTMLのまま
margin-inline-start（論理プロパティ）	右書きの言語で、左右が自動で反転

たとえば、余白を作る gap。
24px と指定して測ると、ちょうど24pxでした。

flex gap:24px の実測 — 隣り合う要素の間隔は 24px（Google Chrome 150）

ここからは、特に大事なポイントを1つずつ見ていきます。

Flexbox と Grid、どう使い分ける？

かんたんな見分け方があります。

要素を1方向（横だけ、または縦だけ）に並べる → Flexbox
縦と横の両方でレイアウトする → Grid

効くと思ったら効かない「justify-self」

justify-self: end は、要素を端に寄せる指定です。
でも、Flexbox のアイテムには効きません。

実測でも、Flex のアイテムは動きませんでした（左から0pxのまま）。
Grid なら効きます（右端へ、左から300px移動）。

Flexbox で端に寄せたいときは、代わりに margin-inline-start: auto を使います。
これは実測でも、要素が右端にぴったり付きました。

長いURLのはみ出しを止める

長いURLが、枠からはみ出すこと、ありますよね。
これを止めるのは overflow-wrap: anywhere です。

よく紹介される min-width: 0 だけでは、実は止まりませんでした。
箱は縮んでも、文字ははみ出したままだったのです。
くわしくは MDN の overflow-wrap を参照してください。

カードを自動で並べる「auto-fit」

repeat(auto-fit, minmax(200px, 1fr)) を使うと、画面幅に合わせて列数が変わります。
実測では、1280pxで6列、768pxで3列、375pxで1列になりました。

ただし、注意点があります。
枠の幅が200pxより狭くなると、カードがはみ出します。
狭い場所で使うときは、下限の200pxを見直しましょう。

カードの位置を揃える「subgrid」

subgrid を使うと、隣り合うカードの中身の位置を、そろえられます。
実測では、揃えると本文の開始位置のズレが0pxになりました（使わないと11pxずれました）。

これは Google Chrome 150 で確認した結果です。
どのブラウザで使えるかは、Can I use で確認できます。

並び順を変えるときの注意（row-reverse）

flex-direction: row-reverse は、見た目の並びを逆にします。
でも、キーボードで操作する順番は、HTMLの順のままです。

実測でも、見た目はCBA、キーボードの順はABC（HTMLの順）でした。
3つのボタンのうち、2つが食い違ったのです。

見た目と操作の順がズレると、キーボードやスクリーンリーダーの利用者が困ります。
だから、ボタンなど操作できる要素の並べ替えには、使わないほうが安全です（アクセシビリティの指針 WCAG でも避けるべきとされています）。

右書きの言語にも対応する「論理プロパティ」

margin-left のように「左」と決め打ちする代わりに、margin-inline-start を使えます。
これは「書き始め側」という意味です。

実測では、こうなりました。
左書き（日本語や英語）では、左に40px。
右書き（アラビア語など）では、右に40px。
書く向きに合わせて、自動で反転したのです。

だから、多言語のサイトでも崩れにくくなります。

まとめ — 試して分かったこと

justify-self: end は Flexboxでは効かない（Gridでは効く）
長いURLのはみ出しは overflow-wrap: anywhere で止まる（min-width:0 だけでは止まらない）
auto-fit は画面幅で列数が変わる（ただし枠が200px未満だと破綻する）
subgrid でカードの位置を揃えられる（Chrome 150で確認）
row-reverse は見た目と操作の順がズレるので、操作できる要素には使わない
margin-inline-start は、右書きの言語で自動で反転する

CSSは、読むだけでなく、実際に試すと腑に落ちます。
多言語や、幅の変わるレイアウトには、論理プロパティや auto-fit が向きます。
一方、操作できるUIの並べ替えには向きません。
元記事はこちら、GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全

バズリ編集長のひとこと

今回いちばんの発見は、「min-width:0 だけでは、長いURLのはみ出しは止まらない」ことでした。
ネットでよく紹介される方法でも、実際に測ると違うことがあります。
だからガイドは、自分で試して確かめる価値があるのです。