モダンCSSテクニック：GridとFlexboxの使い分け

Webレイアウトの進化は止まりません。かつての float や clearfix の時代は終わり、現在は Flexbox と CSS Grid が標準となりました。

Flexbox: 1次元のレイアウト#

Flexbox（Flexible Box Layout）は、アイテムを列または行の1方向に配置するために設計されています。

基本的な中央揃え#

これ以上簡単な中央揃えはありません。

.container {
  display: flex;
  justify-content: center; /* 水平方向 */
  align-items: center; /* 垂直方向 */
  height: 100vh;
}

実践例：ナビゲーションバー#

MDN Web Docsのようなサイトのヘッダーを想像してください。

.nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

CSS Grid: 2次元のレイアウト#

Gridは、行と列の2方向を同時に制御できる強力なシステムです。ページ全体のレイアウトに適しています。

聖杯レイアウト (Holy Grail Layout)#

.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar content'
    'footer footer';
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

使い分けの結論#

機能	Flexbox	CSS Grid
次元	1次元 (行 or 列)	2次元 (行 and 列)
用途	コンポーネント、整列	ページ全体のレイアウト
基準	コンテンツベース	レイアウトベース

両者を組み合わせることで、柔軟かつ堅牢なUIを構築できます。例えば、ページ全体の枠組みをGridで作り、その中の各カードコンポーネントの中身をFlexboxで整える、といった使い方が一般的です。