Flexboxとの使い分けからレスポンシブ対応まで実務パターンを網羅
HTML/CSSのレイアウト手法として「Flexbox」をマスターしたデザイナーが、次に習得すべき最強の武器が「CSS Grid（グリッド）レイアウト」です。Flexboxは要素を「一方向（横並び、または縦並び）」に並べるのが得意な反面、格子状にきれいに並んだ複雑なマガジン風レイアウトや、タイル状のギャラリーサイトを作ろうとすると、コードが複雑になりがちです。CSS Gridをマスターすれば、縦と横の「二次元（面）」でレイアウトを完全にコントロールできるようになります。本記事では、実務で今すぐ使えるCSS Gridの基本と、Flexboxとの明確な使い分けの基準を解説します。
1. 【重要】FlexboxとCSS Gridの決定的な違いと使い分けの基準
すべてのレイアウトをどちらか一方だけで作ろうとするのは非効率です。プロは構築するパーツの性質に合わせて、この2つを瞬時に使い分けています。
- Flexboxを使うべき場面（1次元レイアウト）：要素全体の数が流動的で、とにかく「要素を1列に綺麗に並べたい」とき。例：ヘッダーのナビゲーションメニュー、横並びのボタン、1行に収まるタグ一覧など。
- CSS Gridを使うべき場面（2次元レイアウト）：要素の縦の位置と横の位置を最初からピシッと揃えて、「画面全体に grid（格子）を引いて配置を決定したい」とき。例：変則的な画像ギャラリー、新聞や雑誌のような多段組レイアウト、企業の複雑な料金表（マトリクス表）など。
2. 最低限おさえるべき主要プロパティと概念
CSS Gridの記述方法は非常に直感的です。親要素（コンテナ）に対して display: grid; を指定し、縦と横の線の引き方を命令します。
grid-template-columns： 横方向にどれくらいの幅で要素を分割するかを指定します。例えばgrid-template-columns: 1fr 1fr 1fr;と書けば、画面幅を等しく「3分割」したグリッドが完成します（frはGrid専用の比率単位です）。gap： 要素と要素の間の隙間（余白）を数値で指定します。gap: 20px;と書くだけで、上下左右のすべての要素間に20pxの美しいマージンが確保され、Flexboxのようにmargin-rightの末尾を消すといった面倒な処理が一切不要になります。
3. メディアクエリ不要？ auto-fit と minmax を使った超簡単レスポンシブ
CSS Gridの真のパワーが発揮されるのが、スマートフォン対応（レスポンシブ）です。通常であれば、画面幅に合わせてメディアクエリ（@media (max-width: 768px) など）を書き直す必要がありますが、CSS Gridの以下の魔法の1行を使えば、1行のコードで自動レスポンシブ対応のカードレイアウトが作れます。
.grid-container {
display: grid;
/* 画面幅に合わせて、最小250px幅のカードを自動で並べ、入り切らなくなったら自動で折り返す */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
この repeat(auto-fit, minmax(250px, 1fr)) という指定は、「カードの最小幅は250pxに保ち、画面が広くなったら余ったスペースを等倍（1fr）で均等に引き伸ばし、画面が狭くなって250pxを維持できなくなったら自動的に下の行へ回り込ませる」という命令です。デバイスごとの細かな数値調整から解放されるため、制作効率が劇的に向上します。