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

مرجع كامل لـ CSS Grid: خصائص الحاوية، تموضع العناصر، grid-template-areas، fr/minmax/auto-fit، ودليل المقارنة بين Grid و Flexbox.

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 in one paragraph

CSS Grid is a 2-D layout system: you define rows and columns (the "tracks") on a parent (display: grid), and children become grid items that snap into those tracks. The killer feature is fractional units (fr) and minmax(), which let you build responsive layouts without media queries. Combined with grid-template-areas, you can sketch a layout in plain English and have it map to the DOM.

When Grid is the right tool

Use Grid for page-level layout (header / sidebar / main / footer), card galleries with mixed sizes, magazine-style layouts, and forms with aligned label columns. Use Flexbox inside Grid cells for the contents of those cells. The two are not competitors — they're complementary.

Common use cases for CSS Grid

Dashboard builders use Grid to place stat cards, charts, and tables in a two-dimensional arrangement that stays aligned across breakpoints. E-commerce developers use repeat(auto-fit, minmax(250px, 1fr)) for product grids that reflow from 4 columns on desktop to 1 column on mobile — without a single media query. Blog and news sites use named grid areas to implement the classic holy-grail layout with sidebar, main content, and footer in a few lines of CSS.

Tips for best results with CSS Grid

Always add min-width: 0 or use minmax(0, 1fr) instead of plain 1fr for columns that contain text — otherwise long words or preformatted code can cause overflow. Use grid-auto-rows: minmax(100px, auto) for implicit rows so they grow with content but never collapse below a minimum. Test layouts with grid-auto-flow: dense when mixing differently sized items to fill gaps automatically instead of leaving holes.

CSS Grid vs CSS frameworks like Bootstrap or Tailwind

Bootstrap's 12-column grid is built on Flexbox, not CSS Grid — it works but requires extra wrapper divs and class overhead. Tailwind exposes native CSS Grid utilities (grid-cols-*, col-span-*) which compile directly to the Grid properties on this cheat sheet. Using native CSS Grid without a framework gives smaller CSS output and full access to features like grid-template-areas and subgrid that framework abstractions don't always expose.

الأسئلة الشائعة

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.