CSS Gridマスター：2026年実例付き完全ガイド

CSSグリッドはCSSに追加された最強のレイアウトシステムです。2026年、サブグリッドなどGrid Level 2機能がすべての主要ブラウザで完全サポートされました。

グリッドの基本：列、行、配置

グリッドは2次元座標系を作成します。

/* CSS Grid fundamentals */
.grid-container {
    display: grid;

    /* Define columns */
    grid-template-columns: 200px 1fr 1fr;        /* fixed + flexible */
    grid-template-columns: repeat(3, 1fr);        /* 3 equal columns */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* responsive */

    /* Define rows */
    grid-template-rows: auto 1fr auto;            /* header, content, footer */

    /* Gaps */
    gap: 1rem;            /* both row and column gap */
    row-gap: 0.5rem;
    column-gap: 1.5rem;

    /* Alignment */
    justify-items: stretch;   /* horizontal alignment of cells */
    align-items: start;       /* vertical alignment of cells */
    justify-content: center;  /* horizontal alignment of the grid */
    align-content: center;    /* vertical alignment of the grid */
}

/* Place items */
.item {
    grid-column: 1 / 3;      /* span from column 1 to 3 */
    grid-row: 1 / 2;
    grid-column: span 2;      /* span 2 columns */
    grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
}

grid-template-areas：視覚的なレイアウト定義

grid-template-areasを使ってASCIIアートで視覚的にレイアウトを定義できます。

/* grid-template-areas: name regions visually */
.page-layout {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "sidebar main    main"
        "sidebar aside   aside"
        "footer  footer  footer";
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: 60px 1fr auto 80px;
    min-height: 100vh;
    gap: 1rem;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .page-layout {
        grid-template-areas:
            "header"
            "main"
            "aside"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

auto-fill vs auto-fit：メディアクエリなしのレスポンシブ

auto-fillとauto-fitをminmax()と組み合わせると、メディアクエリなしでレスポンシブグリッドが作成できます。

/* auto-fill vs auto-fit — the most important Grid distinction */

/* auto-fill: creates as many columns as possible, even if empty */
.gallery-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
/* Result: always fills the row with tracks, even with empty ones */

/* auto-fit: collapses empty tracks, stretches filled items */
.gallery-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
/* Result: items expand to fill available space */

/* Practical: responsive card grid (no media queries!) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
}
/* min(300px, 100%) prevents overflow on very small screens */

minmax()と組み込みサイジング

minmax(min, max)はグリッドトラックの最小・最大サイズを設定します。

/* minmax() — set minimum and maximum track size */

/* Card layout: minimum 250px, maximum 1fr */
.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
}

/* Intrinsic sizing with min-content / max-content */
.table-grid {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    /* First and last columns size to content, middle fills rest */
}

/* fit-content() — like minmax(auto, max-content) but capped */
.nav {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr fit-content(200px);
}

/* Dense packing: fill holes left by spanning items */
.masonry-like {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 150px;
    grid-auto-flow: dense; /* fills gaps automatically */
}

.tall-item {
    grid-row: span 2; /* takes 2 rows */
}
.wide-item {
    grid-column: span 2; /* takes 2 columns */
}

サブグリッド：CSS Grid Level 2（2026）

サブグリッドはネストされたグリッドが親グリッドのトラック定義に参加できるようにします。

/* Subgrid — CSS Grid Level 2, fully supported in 2026 */
/* Allows nested grids to align to parent grid lines */

/* The problem subgrid solves: */
.card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Without subgrid: each card's internal layout is independent */
/* Card titles and content don't align across cards */

/* With subgrid: */
.card {
    display: grid;
    grid-row: span 3; /* card spans 3 implicit rows */
    grid-template-rows: subgrid; /* inherits parent row tracks */
}
/* Now all cards share the same row grid — titles align! */

.card .card-header { grid-row: 1; }
.card .card-body   { grid-row: 2; }
.card .card-footer { grid-row: 3; }

/* Subgrid for columns too */
.sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.main-content {
    display: grid;
    grid-column: 2;
    grid-template-columns: subgrid; /* aligns to parent columns */
}

/* Browser support: Chrome 117+, Firefox 71+, Safari 16+ — all major browsers */

グリッドアニメーションとトランジション

最新ブラウザはgrid-template-columnsとgrid-template-rowsのトランジションをサポートします。

/* Grid transitions and animation */

/* Animate grid column width on hover */
.sidebar-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    transition: grid-template-columns 0.3s ease;
}

.sidebar-layout:has(.sidebar:hover) {
    grid-template-columns: 350px 1fr; /* expand on hover */
}

/* CSS-only accordion with Grid */
.accordion-item {
    display: grid;
    grid-template-rows: auto 0fr; /* collapsed: 0 fraction */
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
}

.accordion-item.open {
    grid-template-rows: auto 1fr; /* expanded: 1 fraction */
}

.accordion-content {
    min-height: 0; /* required for 0fr to work */
}

CSS Grid vs Flexbox：いつどちらを使うか

ベストプラクティス

• ページレベルにはGrid、コンポーネントレベルにはFlexbox。
• レスポンシブカードグリッドにはrepeat(auto-fill, minmax())を使用。
• 複雑なレイアウトにはgrid-template-areasで領域に名前を付ける。
• 別々のグリッドアイテム内のコンテンツを揃えるにはサブグリッドを使用。
• グリッドの間隔にはmarginの代わりにgapを使用。

よくある質問