CSS Grid と Flexbox の使い分け

CSS Grid と Flexbox は、どちらもモダンなレイアウト手法ですが、それぞれ得意分野があります。この記事では、両者の特徴と使い分けについて詳しく解説します。

Flexbox の基本

Flexbox は一次元のレイアウトシステムで、行または列方向のレイアウトに適しています。

基本的な使い方

.flex-container {
  display: flex;
  flex-direction: row; /* 初期値 */
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.flex-item {
  flex: 1; /* 均等に伸縮 */
}

.flex-item:nth-child(2) {
  flex: 2; /* 他の2倍のサイズ */
}

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

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.navbar-nav {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.navbar-nav a {
  color: white;
  text-decoration: none;
  transition: color 0.2s;
}

.navbar-nav a:hover {
  color: #007bff;
}

<nav class="navbar">
  <div class="navbar-brand">ブログサイト</div>
  <ul class="navbar-nav">
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">について</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

CSS Grid の基本

CSS Grid は二次元のレイアウトシステムで、行と列を同時に制御できます。

基本的な使い方

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}

.header {
  grid-column: 1 / -1; /* 全ての列にまたがる */
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main {
  grid-column: 2 / -1;
  grid-row: 2;
}

.footer {
  grid-column: 1 / -1;
  grid-row: 3;
}

実践例：ブログレイアウト

.blog-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 2rem;
  padding: 1rem;
}

.header {
  grid-area: header;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #e9ecef;
  padding: 1rem;
  border-radius: 8px;
}

.main {
  grid-area: main;
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.footer {
  grid-area: footer;
  background-color: #343a40;
  color: white;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .blog-layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

使い分けのガイドライン

Flexbox を使う場面

1. ナビゲーションメニュー

.nav-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

2. カードコンポーネント内のレイアウト

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card-body {
  flex: 1;
}

3. センタリング

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

CSS Grid を使う場面

1. ページ全体のレイアウト

.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

2. カードグリッド

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

3. 複雑なフォームレイアウト

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form-grid .full-width {
  grid-column: 1 / -1;
}

組み合わせて使う

/* GridとFlexboxの組み合わせ例 */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
}

.header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  background-color: #333;
  color: white;
}

.sidebar {
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  padding: 1rem;
}

.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  padding: 2rem;
  overflow-y: auto;
}

.widget {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.widget-content {
  flex: 1;
}

レスポンシブデザインのベストプラクティス

.responsive-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1rem;
}

/* モバイルファースト */
.navigation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Grid areas for complex layouts */
.complex-layout {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
  gap: 1rem;
}

@media (min-width: 768px) {
  .complex-layout {
    grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer";
    grid-template-columns: 200px 1fr 250px;
  }
}

まとめ

• Flexbox: 一次元レイアウト、コンポーネント内のレイアウト、アライメント
• CSS Grid: 二次元レイアウト、ページレベルのレイアウト、複雑なグリッド

両者を適切に組み合わせることで、保守性が高く、レスポンシブなレイアウトを効率的に作成できます。