【CSS】FlexboxとCSS Grid Layoutの基本と使い分け

<div class="flex-container">
  <div class="flex-item">アイテム1</div>
  <div class="flex-item">アイテム2</div>
  <div class="flex-item">アイテム3</div>
</div>

.flex-container {
  display: flex; /* これでFlexboxが有効になる */
  border: 2px solid blue; /* コンテナの範囲を分かりやすくするため */
  padding: 10px;
}

.flex-item {
  background-color: lightblue;
  border: 1px solid navy;
  padding: 20px;
  margin: 5px; /* アイテム間の隙間 */
  text-align: center;
}

.flex-container {
  display: flex;
  flex-direction: row; /* 横並び (デフォルト) */
  /* flex-direction: column; */ /* 縦並びにしたい場合 */
  border: 2px solid blue;
  padding: 10px;
  height: 200px; /* 縦並びの際に分かりやすくするため高さを指定 */
}
/* (flex-itemのスタイルは省略) */

/* 例: アイテムを中央揃えにする */
.flex-container {
  display: flex;
  justify-content: center; /* 主軸方向（デフォルトは横）の中央揃え */
  border: 2px solid blue;
  padding: 10px;
}
/* (flex-itemのスタイルは省略) */

/* 例: アイテムを均等間隔で配置する */
.flex-container {
  display: flex;
  justify-content: space-between; /* 両端に寄せ、間を均等に */
  border: 2px solid blue;
  padding: 10px;
}
/* (flex-itemのスタイルは省略) */

/* 例: アイテムを垂直方向の中央に揃える */
.flex-container {
  display: flex;
  align-items: center; /* 交差軸方向（デフォルトは縦）の中央揃え */
  border: 2px solid blue;
  padding: 10px;
  height: 150px; /* 高さを指定しないと効果が分かりにくい */
}
/* (flex-itemのスタイルは省略) */

.flex-container {
  display: flex;
  flex-wrap: wrap; /* はみ出たら折り返す */
  border: 2px solid blue;
  padding: 10px;
  width: 300px; /* 幅を制限して折り返しを発生させる */
}

.flex-item {
  background-color: lightblue;
  border: 1px solid navy;
  padding: 20px;
  margin: 5px;
  width: 100px; /* アイテムの幅を指定 */
  text-align: center;
}

.flex-item:nth-child(1) {
  flex-grow: 1; /* 他のアイテムより1倍伸びる */
}
.flex-item:nth-child(2) {
  flex-grow: 2; /* 他のアイテムより2倍伸びる */
}
/* アイテム3はデフォルトのflex-grow: 0 */

.flex-item:nth-child(1) { order: 3; }
.flex-item:nth-child(2) { order: 1; }
.flex-item:nth-child(3) { order: 2; }
/* 表示順: アイテム2 -> アイテム3 -> アイテム1 */

<div class="grid-container">
  <div class="grid-item">アイテム1</div>
  <div class="grid-item">アイテム2</div>
  <div class="grid-item">アイテム3</div>
  <div class="grid-item">アイテム4</div>
  <div class="grid-item">アイテム5</div>
  <div class="grid-item">アイテム6</div>
</div>

.grid-container {
  display: grid; /* これでGridが有効になる */
  /* 例: 3つの均等な幅の列を作成 */
  grid-template-columns: 1fr 1fr 1fr; /* fr は利用可能なスペースの割合を示す単位 */
  /* 例: 2つの行を作成 (高さは自動) */
  grid-template-rows: auto auto;
  gap: 10px; /* グリッド線（アイテム間）の隙間 */
  border: 2px solid green; /* コンテナの範囲を分かりやすくするため */
  padding: 10px;
}

.grid-item {
  background-color: lightgreen;
  border: 1px solid darkgreen;
  padding: 20px;
  text-align: center;
}

.grid-container {
  display: grid;
  /* 1列目は100px, 2列目は残りスペースの1/3, 3列目は残りスペースの2/3 */
  grid-template-columns: 100px 1fr 2fr;
  gap: 10px;
  border: 2px solid green;
  padding: 10px;
}
/* (grid-itemのスタイルは省略) */

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 1行目は50px, 2行目は100px */
  grid-template-rows: 50px 100px;
  gap: 10px;
  border: 2px solid green;
  padding: 10px;
}
/* (grid-itemのスタイルは省略) */

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  grid-template-rows: auto auto auto;   /* 3行 */
  gap: 10px;
  border: 2px solid green;
  padding: 10px;
  height: 300px; /* 高さを指定 */
}

.grid-item {
  background-color: lightgreen;
  border: 1px solid darkgreen;
  padding: 10px; /* パディングを少し減らす */
  text-align: center;
  font-size: 0.9em; /* 文字サイズを少し小さく */
}

/* アイテム1を、1列目から3列目まで広げる */
.grid-item:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3; /* 3番目の線の手前まで */
  /* ショートハンド: grid-column: 1 / 3; */
  background-color: #a0e0a0; /* 色を変えて目立たせる */
}

/* アイテム3を、2行目から4行目まで広げる */
.grid-item:nth-child(3) {
  grid-row-start: 2;
  grid-row-end: 4; /* 4番目の線の手前まで */
  /* ショートハンド: grid-row: 2 / 4; */
  background-color: #7fbf7f; /* 色を変えて目立たせる */
}

/* アイテム5を、3列目の2行目に配置 */
.grid-item:nth-child(5) {
  grid-column: 3 / 4; /* 3列目 */
  grid-row: 2 / 3;    /* 2行目 */
  background-color: #5dab5d; /* 色を変えて目立たせる */
}

/* アイテム2を、開始位置から2列分広げる */
.grid-item:nth-child(2) {
  grid-column: span 2;
}

<div class="page-container">
  <header class="page-header">
    <div class="logo">ロゴ</div>
    <nav class="main-nav">
      <a href="#">メニュー1</a>
      <a href="#">メニュー2</a>
      <a href="#">メニュー3</a>
    </nav>
  </header>
  <main class="page-main">メインコンテンツ...</main>
  <aside class="page-sidebar">サイドバー...</aside>
  <footer class="page-footer">フッター...</footer>
</div>

/* ページ全体のGrid設定 */
.page-container {
  display: grid;
  grid-template-columns: 1fr 250px; /* メイン:残り全部, サイドバー:250px */
  grid-template-rows: auto 1fr auto; /* ヘッダー:自動, メイン/サイド:残り, フッター:自動 */
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
  min-height: 100vh; /* 画面の高さいっぱいにする */
  gap: 15px;
}

.page-header { grid-area: header; background-color: #eee; padding: 10px; }
.page-main { grid-area: main; background-color: #f9f9f9; padding: 20px; }
.page-sidebar { grid-area: sidebar; background-color: #eef; padding: 15px; }
.page-footer { grid-area: footer; background-color: #ddd; padding: 10px; text-align: center;}

/* ヘッダー内部のFlexbox設定 */
.page-header {
  display: flex;
  justify-content: space-between; /* 両端揃え */
  align-items: center;       /* 垂直中央揃え */
}

.main-nav a {
  margin-left: 15px; /* メニュー間のスペース */
  text-decoration: none;
  color: blue;
}

/* (ロゴのスタイルは省略) */