When should I use CSS Grid vs Flexbox?

Grid is for two-dimensional layouts (rows AND columns simultaneously) — page layouts, dashboards, photo galleries with both fixed and fluid tracks. Flexbox is for one-dimensional layouts (items in a row OR a column) — navbars, button rows, centered content. Grid wins for the macro page structure; Flexbox wins for the micro component layout. Use both together: Grid for the page, Flexbox for components inside grid cells.

What does fr mean in grid-template-columns?

fr stands for 'fraction of remaining space'. grid-template-columns: 1fr 2fr means after fixed-size tracks are allocated, the remaining space is split — first column gets 1/3, second gets 2/3. fr is grid's killer feature: responsive without media queries. Use 1fr 1fr 1fr for three equal columns; auto 1fr for fixed-then-fill layouts (like navbar logo + flexible nav).

What's the difference between auto-fit and auto-fill?

Both create as many columns as fit. auto-fill keeps empty columns reserved (so a single item stays at minmax minimum width). auto-fit collapses empty columns (so a single item can stretch full width). For typical responsive card grids, auto-fit feels more natural. Pattern: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)).

Why isn't my grid-template-areas working?

Three common bugs: (1) Areas must form a rectangle — 'header header' must repeat across all rows that area spans; (2) Each row must have the same number of columns; (3) Areas you reference in grid-area on items must exist in grid-template-areas. Use a dot (.) for empty cells. Always check your area names match exactly — typos are silent failures.

How do I center an item in a grid cell?

Three options depending on scope. Centre one item: place-self: center on that item. Centre all items: place-items: center on the container. Centre the entire content within the grid: place-content: center on the container. place-* is shorthand for align-* and justify-*. For Grid+Flex layouts, place-items: center is the modern 'center anything' incantation.

CSS Grid Cheat Sheet

Complete CSS Grid reference: container properties, item placement, grid-template-areas, fr/minmax/auto-fit, and Grid vs Flexbox decision guide.

Container properties (`display: grid`)

Property	Purpose	Example
`grid-template-columns`	Define column tracks	`1fr 2fr 1fr`
`grid-template-rows`	Define row tracks	`auto 1fr auto`
`grid-template-areas`	Name areas for placement	`"hd hd" "nav main" "ft ft"`
`gap`	Space between tracks	`16px` or `1rem 2rem`
`justify-items`	Inline-axis alignment of items in cells	`start \| center \| end \| stretch`
`align-items`	Block-axis alignment of items in cells	`start \| center \| end \| stretch`
`place-items`	Shorthand for both	`center`
`justify-content`	Position the entire grid horizontally	`space-between`
`align-content`	Position the entire grid vertically	`space-around`
`grid-auto-flow`	How auto-placed items flow	`row \| column \| dense`
`grid-auto-rows`	Default size for implicit rows	`200px` or `minmax(100px, auto)`

Item properties

Property	Example	Effect
`grid-column`	`1 / 3` or `span 2`	Span column tracks 1 to 3 (exclusive)
`grid-row`	`2 / span 2`	Start at row 2, span 2 rows
`grid-area`	`header`	Place in named area
`justify-self`	`end`	Override container's justify-items for one item
`align-self`	`center`	Override container's align-items for one item
`place-self`	`center end`	Shorthand for align-self + justify-self

Track sizing units

Unit / function	Means	When to use
`fr`	Fraction of remaining space	Flexible columns/rows
`auto`	Sized by content	Sidebar that fits its content
`min-content`	Smallest size content can shrink to	Avoid overflow
`max-content`	Largest size content needs	Inline-block-like behaviour
`minmax(min, max)`	Range	`minmax(200px, 1fr)` — at least 200, otherwise flex
`repeat(N, ...)`	Repeat tracks N times	`repeat(3, 1fr)` = `1fr 1fr 1fr`
`repeat(auto-fit, ...)`	Fill, collapse empty	Responsive cards (single item stretches)
`repeat(auto-fill, ...)`	Fill, keep empty	Calendar-style grids

Common patterns

Responsive card grid (no media queries)

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

Holy grail layout

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

12-column grid (Bootstrap-style)

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

Center anything

.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Sticky header + scrollable body

.app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}
header { /* row 1 - auto height */ }
main { overflow-y: auto; /* row 2 - fills remaining */ }

Grid vs Flexbox decision matrix

Need	Choose
2-D page layout (rows + cols)	Grid
Navigation bar items in a row	Flexbox
Card grid that wraps responsively	Grid (auto-fit minmax)
Buttons aligned right of a header	Flexbox (justify-content: space-between)
Mosaic / masonry-style	Grid (with grid-auto-flow: dense)
Equal-height columns of unknown count	Flexbox
Calendar / spreadsheet-like	Grid
Chat message list (top-anchored)	Flexbox (column-reverse)

Browser support & gotchas

All modern browsers (Chrome 57+, Safari 10.1+, Firefox 52+) — 97%+ global support since 2017.
IE11 has a partial older spec — needs -ms- prefix and explicit grid-row/column-end; usually not worth supporting in 2026.
gap works in Flexbox too since 2021 — Safari was the holdout.
subgrid (inheriting parent grid's tracks) is in all modern browsers since 2023 — use freely.
Grid items don't shrink below their min-content by default — use min-width: 0 or minmax(0, 1fr) if content overflows.

CSS Gridを一段落で

Gridが適切なツールである場合

CSS Gridは2次元レイアウトシステムです。親（display: grid）に行と列（「トラック」）を定義し、子がグリッドアイテムになってそれらのトラックにスナップします。キラー機能は分数単位（fr）とminmax()で、メディアクエリなしでレスポンシブレイアウトを構築できます。grid-template-areasと組み合わせることで、平易な言葉でレイアウトをスケッチしてDOMにマッピングできます。

Gridはページレベルのレイアウト（ヘッダー/サイドバー/メイン/フッター）、サイズが混在したカードギャラリー、マガジンスタイルのレイアウト、整列したラベル列のフォームに使用します。GridセルのコンテンツにはFlexboxを使用します。この2つは競合するものではなく、補完的なものです。

ダッシュボードビルダーはGridを使用して、ブレークポイントをまたいで整列を保つ2次元の配置に統計カード、チャート、テーブルを配置します。ECサイト開発者はrepeat(auto-fit, minmax(250px, 1fr))を使ってデスクトップで4列、モバイルで1列に再フローするプロダクトグリッドを、単一のメディアクエリなしで実現します。ブログやニュースサイトはgrid-template-areasを使って、サイドバー、メインコンテンツ、フッターを持つ古典的なホーリーグレイルレイアウトを数行のCSSで実装します。

テキストを含む列には、プレーンな1frの代わりにmin-width: 0を追加するかminmax(0, 1fr)を使用してください — そうしないと長い単語や整形済みコードがオーバーフローを引き起こす可能性があります。暗黙的な行には、grid-auto-rows: minmax(100px, auto)を使用して、コンテンツに合わせて成長するが最小値以下に縮まないようにします。異なるサイズのアイテムを混在させる場合は、grid-auto-flow: denseでテストして、穴を残す代わりにギャップを自動的に埋めます。

Bootstrapの12列グリッドはCSS GridではなくFlexboxで構築されています — 機能しますが追加のラッパーdivとクラスのオーバーヘッドが必要です。Tailwindはネイティブなのためのutility（grid-cols-*、col-span-*）を公開しており、このチートシートのGridプロパティに直接コンパイルされます。フレームワークなしでネイティブCSSのGridを使用すると、より小さなCSSの出力が得られ、フレームワークの抽象化が常に公開するとは限らないgrid-template-areasやsubgridなどの機能へのフルアクセスが得られます。

よくある質問

When should I use CSS Grid vs Flexbox?: Grid is for two-dimensional layouts (rows AND columns simultaneously) — page layouts, dashboards, photo galleries with both fixed and fluid tracks. Flexbox is for one-dimensional layouts (items in a row OR a column) — navbars, button rows, centered content. Grid wins for the macro page structure; Flexbox wins for the micro component layout. Use both together: Grid for the page, Flexbox for components inside grid cells.
What does fr mean in grid-template-columns?: fr stands for 'fraction of remaining space'. grid-template-columns: 1fr 2fr means after fixed-size tracks are allocated, the remaining space is split — first column gets 1/3, second gets 2/3. fr is grid's killer feature: responsive without media queries. Use 1fr 1fr 1fr for three equal columns; auto 1fr for fixed-then-fill layouts (like navbar logo + flexible nav).
What's the difference between auto-fit and auto-fill?: Both create as many columns as fit. auto-fill keeps empty columns reserved (so a single item stays at minmax minimum width). auto-fit collapses empty columns (so a single item can stretch full width). For typical responsive card grids, auto-fit feels more natural. Pattern: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)).
Why isn't my grid-template-areas working?: Three common bugs: (1) Areas must form a rectangle — 'header header' must repeat across all rows that area spans; (2) Each row must have the same number of columns; (3) Areas you reference in grid-area on items must exist in grid-template-areas. Use a dot (.) for empty cells. Always check your area names match exactly — typos are silent failures.
How do I center an item in a grid cell?: Three options depending on scope. Centre one item: place-self: center on that item. Centre all items: place-items: center on the container. Centre the entire content within the grid: place-content: center on the container. place-* is shorthand for align-* and justify-*. For Grid+Flex layouts, place-items: center is the modern 'center anything' incantation.