GridとFlexboxの使い分け

<div class="shell">
  <header>
    <span class="logo">Console</span>
    <span style="margin-left:auto; color:#5a6478; font-size:0.86rem">田中 さん</span>
  </header>

  <nav aria-label="メインメニュー">
    <ul class="nav-list">
      <li><a href="#" aria-current="page">ダッシュボード</a></li>
      <li><a href="#">注文</a></li>
      <li><a href="#">商品</a></li>
      <li><a href="#">お客様</a></li>
      <li><a href="#">設定</a></li>
    </ul>
  </nav>

  <main>
    <div class="panel">
      <h1>ダッシュボード</h1>
      <p>ヘッダー・サイドバー・本文・フッターの4領域を、grid-template-areas で名前を付けて配置しています。HTML の並び順とレイアウトが切り離されているので、狭い画面では領域名の並びを書き換えるだけで縦積みになります。</p>
    </div>
  </main>

  <footer>© 2026 Console — 管理画面の骨格サンプル</footer>
</div>

/* 画面の骨格は「面」なので Grid。名前を付けた領域に置くと、
   HTML の並び順とレイアウトを切り離せる。 */
.shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head head"
    "side main"
    "side foot";
}
.shell > header { grid-area: head; }
.shell > nav    { grid-area: side; }
.shell > main   { grid-area: main; }
.shell > footer { grid-area: foot; }

/* 狭い画面では1列に畳む。領域名で書いてあるので、
   並べ替えは grid-template-areas を書き換えるだけで済む。 */
@media (max-width: 720px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "main"
      "side"
      "foot";
  }
}

.shell > header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.2rem;
  background: #fff; border-bottom: 1px solid var(--line);
}
.shell > nav {
  padding: 1rem 0.8rem;
  background: #fff; border-right: 1px solid var(--line);
}
.shell > main { padding: 1.4rem 1.2rem; }
.shell > footer {
  padding: 0.8rem 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.82rem; line-height: 1.7;
}
@media (max-width: 720px) {
  .shell > nav { border-right: 0; border-top: 1px solid var(--line); }
}

<div class="cards">
  <article class="card">
    <h3>受注管理</h3>
    <p>注文の一覧、絞り込み、CSV書き出しまで。</p>
    <span class="foot">詳しく見る →</span>
  </article>
  <article class="card">
    <h3>在庫連携</h3>
    <p>倉庫システムと1時間ごとに同期します。差分だけを送るので回線に優しい構成です。</p>
    <span class="foot">詳しく見る →</span>
  </article>
  <article class="card">
    <h3>請求書の発行</h3>
    <p>月末締めで自動生成。</p>
    <span class="foot">詳しく見る →</span>
  </article>
  <article class="card">
    <h3>権限管理</h3>
    <p>編集者と閲覧者の2段階。招待はリンク発行だけで完了します。</p>
    <span class="foot">詳しく見る →</span>
  </article>
  <article class="card">
    <h3>監査ログ</h3>
    <p>誰がいつ何を変えたかを90日間保持します。</p>
    <span class="foot">詳しく見る →</span>
  </article>
  <article class="card">
    <h3>通知</h3>
    <p>メールとWebhookに対応。</p>
    <span class="foot">詳しく見る →</span>
  </article>
</div>

/* 画面幅ごとの分岐を1行も書かずに列数が変わる。
   auto-fit は「入るだけ列を作り、余ったトラックは畳む」。
   min() を挟むのは、狭い画面で 240px が画面幅を超えて溢れるのを防ぐため。 */
.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* auto-fill との違い:
   auto-fit  … 中身が少ないとき、残りのトラックを畳んでカードが伸びる
   auto-fill … 空のトラックを残すので、カードは伸びず左に寄る
   「1枚のときに全幅へ伸ばしたい」なら auto-fit を選ぶ。 */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.card h3 { margin: 0; font-size: 1rem; line-height: 1.6; }
.card p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.85; }
/* 最後の行を下端に押し付ける。高さが揃わないカードでも脚が揃う。 */
.card .foot {
  margin-top: auto; padding-top: 0.6rem;
  color: var(--accent); font-size: 0.82rem; line-height: 1.7;
}

<div class="grid2">
  <div class="demo">
    <h3>1. place-items: center（最短）</h3>
    <div class="stage center-grid"><span class="chip">中央</span></div>
  </div>

  <div class="demo">
    <h3>2. Flexbox（横並びのまま中央）</h3>
    <div class="stage center-flex">
      <span class="chip">左</span><span class="chip">右</span>
    </div>
  </div>

  <div class="demo">
    <h3>3. 高さのない親に min-height</h3>
    <div class="center-minh" style="background:#f2f4f9"><span class="chip">中央</span></div>
  </div>

  <div class="demo">
    <h3>4. 絶対配置（重ねるとき用）</h3>
    <div class="stage center-abs"><span class="chip">中央</span></div>
  </div>
</div>

/* 1) いちばん短い。子が1つでも複数でも効く */
.center-grid {
  display: grid;
  place-items: center;
}

/* 2) Flexbox。横並びのまま中央に置きたいときはこちら。
      gap も同時に効かせられる */
.center-flex {
  display: flex;
  align-items: center;      /* 交差軸（縦） */
  justify-content: center;  /* 主軸（横） */
  gap: 0.5rem;
}

/* 3) 高さを持たない親を中央にしたいとき。
      親に min-height を与えるのを忘れない */
.center-minh {
  display: grid;
  place-items: center;
  min-height: 150px;
}

/* 4) 絶対配置。ほかの要素の上に重ねたいときだけ使う。
      translate(-50%, -50%) が要素自身の半分を戻す役割 */
.center-abs { position: relative; }
.center-abs > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="masonry">
  <div class="tile"><div class="bar"></div><h3>短いメモ</h3><p>一行だけ。</p></div>
  <div class="tile"><div class="bar"></div><h3>設計の覚え書き</h3><p>余白は4pxの倍数で刻む。行間は日本語なら1.8前後。この2つを最初に決めておくと、あとから全体を作り直さずに済みます。</p></div>
  <div class="tile"><div class="bar"></div><h3>色の決め方</h3><p>まず1色だけ決めて、残りは明度で作る。</p></div>
  <div class="tile"><div class="bar"></div><h3>読み込みの体感</h3><p>実際の速さより、待っていることが分かるかどうかが効きます。スケルトンを置くだけで印象が変わります。</p></div>
  <div class="tile"><div class="bar"></div><h3>命名</h3><p>見た目ではなく役割で名付ける。</p></div>
  <div class="tile"><div class="bar"></div><h3>フォーム</h3><p>ラベルは必ず上に置き、入力欄と for と id で結ぶ。プレースホルダーをラベル代わりにしない。入力を始めた瞬間に何の欄か分からなくなります。</p></div>
  <div class="tile"><div class="bar"></div><h3>アイコン</h3><p>装飾なら aria-hidden を付ける。</p></div>
  <div class="tile"><div class="bar"></div><h3>影</h3><p>距離を長く、不透明度を低く。近い影は安っぽく見えます。</p></div>
</div>

/* CSS の masonry はまだ全ブラウザには来ていない。
   いま確実に動くのは multi-column を使う方法。
   段組みなので「縦に流れて折り返す」順序になる点だけ注意する。 */
.masonry {
  column-count: 3;
  column-gap: 1rem;
}
@media (max-width: 860px) { .masonry { column-count: 2; } }
@media (max-width: 560px) { .masonry { column-count: 1; } }

.masonry > * {
  /* これが無いとカードが段の境目で分断される */
  break-inside: avoid;
  margin-bottom: 1rem;
}

.tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.tile h3 { margin: 0 0 0.35rem; font-size: 0.98rem; line-height: 1.6; }
.tile p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.85; }
.tile .bar {
  height: 8px; border-radius: 999px; margin-bottom: 0.7rem;
  background: linear-gradient(90deg, var(--accent), #22d3ee);
}