ダッシュボードレイアウトのCSS Grid実装

サイドバー + メインエリア + KPIカード群を持つダッシュボード定番レイアウト。管理画面・分析画面に最適です。

プレビュー

sidebar

header

kpi-1

kpi-2

kpi-3

kpi-4

chart-main

chart-side

HTML

<div class="grid-container">
  <div class="item-1">sidebar</div>
  <div class="item-2">header</div>
  <div class="item-3">kpi-1</div>
  <div class="item-4">kpi-2</div>
  <div class="item-5">kpi-3</div>
  <div class="item-6">kpi-4</div>
  <div class="item-7">chart-main</div>
  <div class="item-8">chart-side</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  height: 500px;
}

.item-1 { grid-area: 1 / 1 / 5 / 2; }
.item-2 { grid-area: 1 / 2 / 2 / 7; }
.item-3 { grid-area: 2 / 2 / 3 / 3; }
.item-4 { grid-area: 2 / 3 / 3 / 4; }
.item-5 { grid-area: 2 / 4 / 3 / 5; }
.item-6 { grid-area: 2 / 5 / 3 / 7; }
.item-7 { grid-area: 3 / 2 / 5 / 5; }
.item-8 { grid-area: 3 / 5 / 5 / 7; }

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .grid-container > * {
    grid-area: auto;
  }
}

このレイアウトの解説

ダッシュボード型のレイアウトは、左サイドバー・上部ヘッダー・KPIカード群・メインチャート・サイドチャートといった複数の領域を同時に表示するため、CSS Gridの得意分野です。grid-template-columnsとgrid-template-rowsで土台を作り、各ウィジェットにgrid-columnとgrid-rowで範囲を指定するだけで整理できます。固定の列/行で配置するためコンテンツ量が変わっても崩れにくいのが特徴です。

どんな場面で使う？

SaaSの管理画面、分析ダッシュボード、社内ツールなど、情報密度の高い画面構成に向いています。

自分でカスタマイズしたい方へ

列数・行数・Gap・セルの範囲を自由に変更したい場合は、CSS Grid Generatorでドラッグ操作によりオリジナルのグリッドを作成できます。詳しい使い方は使い方ガイドをご覧ください。

ジェネレーターで自分のグリッドを作る →