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 มิติ: คุณกำหนด row และ column ("tracks") บน parent (display: grid) และ child กลายเป็น grid item ที่เข้าตำแหน่งใน track เหล่านั้น คุณสมบัติเด่นคือ fractional unit (fr) และ minmax() ซึ่งช่วยให้คุณสร้าง responsive layout โดยไม่ต้องใช้ media query ประกอบกับ grid-template-areas คุณสามารถร่าง layout เป็นภาษาที่อ่านได้และแมปกับ DOM

ใช้ Grid สำหรับ layout ระดับหน้า (header / sidebar / main / footer), gallery ของ card ที่มีขนาดผสมผสาน, layout แบบนิตยสาร และฟอร์มที่มีคอลัมน์ label จัดแนว ใช้ Flexbox ภายใน Grid cell สำหรับเนื้อหาของ cell เหล่านั้น ทั้งสองไม่ใช่คู่แข่งกัน — พวกมันเสริมซึ่งกันและกัน

ผู้สร้าง dashboard ใช้ Grid วาง stat card, chart และตารางในแนว 2 มิติที่คงการจัดแนวในทุก breakpoint นักพัฒนา e-commerce ใช้ repeat(auto-fit, minmax(250px, 1fr)) สำหรับ grid สินค้าที่ reflow จาก 4 คอลัมน์บน desktop เป็น 1 คอลัมน์บนมือถือ โดยไม่ต้องใช้ media query แม้แต่อัน เว็บ blog และข่าวใช้ named grid area เพื่อใช้งาน holy-grail layout แบบคลาสสิกที่มี sidebar, เนื้อหาหลัก และ footer ด้วย CSS เพียงไม่กี่บรรทัด

เสมอเพิ่ม min-width: 0 หรือใช้ minmax(0, 1fr) แทน 1fr ธรรมดาสำหรับคอลัมน์ที่มีข้อความ — มิฉะนั้นคำยาวหรือโค้ด preformatted อาจทำให้เกิด overflow ใช้ grid-auto-rows: minmax(100px, auto) สำหรับ implicit row เพื่อให้ขยายตามเนื้อหาแต่ไม่หดเล็กกว่าขั้นต่ำ ทดสอบ layout ด้วย grid-auto-flow: dense เมื่อผสม item ที่มีขนาดต่างกันเพื่อเติม gap โดยอัตโนมัติแทนที่จะปล่อยช่องว่าง

Grid 12 คอลัมน์ของ Bootstrap สร้างบน Flexbox ไม่ใช่ CSS Grid — มันใช้งานได้แต่ต้องใช้ wrapper div และ class เพิ่มขึ้น Tailwind เปิดเผย CSS Grid utility แบบ native (grid-cols-*, col-span-*) ซึ่ง compile ตรงไปยัง Grid property ใน cheat sheet นี้ การใช้ CSS Grid แบบ native โดยไม่มี framework ให้ CSS output ที่เล็กกว่าและเข้าถึงฟีเจอร์ได้เต็มที่ เช่น grid-template-areas และ subgrid ที่ framework อาจไม่เปิดเผยเสมอไป

คำถามที่พบบ่อย

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.