Title: CSS Grid Vs Flexbox When To Use Which — LearnCoachAssist

Q: One-line summary: when Grid vs Flexbox?
A: Grid: 2D layout (rows AND columns), known structure.
Flexbox: 1D layout (row OR column), content-driven.

Q: Center a single element on the page — Grid or Flex?
A: Either works. display: grid; place-items: center; or display: flex; align-items: center; justify-content: center;

Q: Make a sidebar + main layout with Grid?
A: grid-template-columns: 250px 1fr;

Q: Same layout with Flex?
A: display:flex; with sidebar flex: 0 0 250px and main flex: 1.

Q: Equal-height columns naturally?
A: Grid: rows stretch by default.
Flex: items stretch on the cross axis (align-items: stretch is default).

Q: Holy Grail layout?
A: Grid: grid-template: 'header header header' auto 'nav main aside' 1fr 'footer footer footer' auto / 200px 1fr 200px;

Q: Gap between items?
A: Both support gap: 1rem; — replaces margin hacks.

Q: Auto-place a number of items into a responsive grid?
A: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Q: auto-fit vs auto-fill?
A: auto-fill: keeps empty tracks even if not used (collapses to min).
auto-fit: collapses empty tracks (items stretch).

Q: Span 2 columns?
A: grid-column: span 2 or grid-column: 1 / 3.

Q: Span all columns?
A: grid-column: 1 / -1 — line names go to last.

Q: Order items differently than DOM?
A: order: -1 (flex/grid) — but it harms accessibility/tab order. Reserve for visual reorder where the source order is intentional.

Q: Flex: grow vs shrink vs basis?
A: flex-grow: how much extra space to take.
flex-shrink: how much to shrink under overflow.
flex-basis: starting size before grow/shrink.

Q: Shorthand flex: 1?
A: Equivalent to flex: 1 1 0% — fill remaining space.

Q: Common 'why does my flex child overflow' cause?
A: Default min-width: auto on flex items prevents shrinking below content. Set min-width: 0.

Q: Make a card image fill its grid cell?
A: img { width:100%; height:100%; object-fit: cover; }

Q: Align baseline of text across columns?
A: align-items: baseline; (works in both flex and grid).

Q: Center text vertically in a header bar?
A: display:flex; align-items:center;

Q: Distribute items evenly across the main axis with equal gaps?
A: justify-content: space-between (no edge gap) or space-evenly (equal everywhere).

Q: Wrap flex items onto multiple lines?
A: flex-wrap: wrap;

Q: Grid auto-rows?
A: grid-auto-rows: minmax(120px, auto); — default size for implicit rows.

Q: Dense packing?
A: grid-auto-flow: dense; — fills holes when items vary in span.

Q: Subgrid use case?
A: Nested grids that inherit parent's tracks — align inner items to outer columns. Supported in modern browsers.

Q: Sticky header with grid layout?
A: Put header in its own row, then position: sticky; top: 0; on the header element.

Q: Equal-width grid columns?
A: grid-template-columns: repeat(3, 1fr);

Q: Sidebar that collapses below content on mobile?
A: @media (max-width: 768px) { grid-template-columns: 1fr; }

Q: Flex equivalent of 1fr?
A: flex: 1 on each child.

Q: Center one item to bottom-right of grid?
A: justify-self: end; align-self: end; on the item, or place-self: end;.

Q: Difference between justify-content and justify-items in Grid?
A: justify-content: aligns the grid as a whole within its container.
justify-items: aligns each item within its cell.

Q: Why does display: flex on a parent break margin auto centering?
A: margin: auto works inside flex too: margin-left: auto on the last item pushes it to the end (e.g., nav with logo + links).

Q: Grid named lines?
A: grid-template-columns: [start] 1fr [mid] 2fr [end];

Q: Aspect ratio for grid items?
A: aspect-ratio: 16 / 9; on the child.

Q: Flex baseline trap?
A: Items with different font sizes may misalign. Use align-items: baseline or unify line-height.

Q: Make a flexbox card grid?
A: display:flex; flex-wrap:wrap; gap:1rem; with each card flex: 1 1 220px;

Q: Grid vs Flex — accessibility tip?
A: Avoid order/grid-area reshuffling for non-cosmetic layout — screen readers and keyboard tab follow DOM order, not visual.

Q: Container queries vs media queries for layout switching?
A: @container: respond to the parent's size, not viewport — great for reusable components placed in different contexts.

Q: Use case for inline-grid vs grid?
A: inline-grid creates an inline-level grid container — flows with text. Rare, but useful for badge-like grids inside paragraphs.

Q: Default flex-direction?
A: row — main axis is horizontal, cross axis vertical.

Q: Default justify-content?
A: flex-start

Q: Default align-items?
A: stretch — children expand to fill the cross axis.

Q: What is the main axis?
A: The direction children flow in a flex container — controlled by flex-direction.

Q: What is the cross axis?
A: Perpendicular to the main axis — where align-items applies.

Q: align-items vs align-content?
A: align-items: per item along the cross axis.
align-content: distributes wrapped lines (multiple rows) along the cross axis.

Q: align-self?
A: Overrides parent's align-items for a single child.

Q: justify-self in Grid?
A: Aligns a single item along the inline axis within its cell.

Q: justify-self in Flexbox?
A: No effect — use margin auto or align-self for cross axis.

Q: flex-basis: 0 vs auto?
A: 0: child gets only grow share, ignoring content size.
auto: child starts at content size, then grows/shrinks.

Q: flex: auto?
A: Equivalent to flex: 1 1 auto — items grow and shrink based on content.

Q: flex: none?
A: Equivalent to flex: 0 0 auto — items don't grow or shrink.

Q: flex: initial?
A: Equivalent to flex: 0 1 auto — items shrink but don't grow.

Q: Equal-width flex items via flex: 1?
A: flex: 1 on each child = 1 1 0% — fill remaining space equally.

Q: flex-direction options?
A: row, row-reverse, column, column-reverse.

Q: flex-wrap options?
A: nowrap (default), wrap, wrap-reverse.

Q: flex-flow shorthand?
A: Combines flex-direction + flex-wrap: flex-flow: row wrap;

Q: gap in flex?
A: Modern; replaces margin tricks: gap: 1rem; works horizontally and vertically.

Q: row-gap vs column-gap?
A: Distinct values: row-gap: 1rem; column-gap: 2rem;

Q: Center single item with flex (modern)?
A: display: flex; place-content: center; — shorthand for align + justify content.

Q: Center with Grid (modern)?
A: display: grid; place-items: center; — shorthand for align + justify items.

Q: grid-template-rows?
A: Defines explicit row sizes: grid-template-rows: 100px 1fr auto;

Q: grid-template-areas?
A: Names cells in a grid for visual layout assignment.

Q: grid-area on a child?
A: grid-area: header; — assigns child to a named area.

Q: grid-area numeric form?
A: grid-area: row-start / col-start / row-end / col-end;

Q: grid-template shorthand?
A: Combines rows, columns, and areas in one declaration.

Q: Implicit grid?
A: Rows/columns created automatically when items overflow explicit grid — sized by grid-auto-rows/columns.

Q: grid-auto-flow row vs column?
A: row: fills row-by-row (default).
column: fills column-by-column.

Q: grid-auto-flow dense?
A: Backfills empty cells when items span varied sizes — can reorder visually.

Q: minmax() in grid?
A: minmax(100px, 1fr) — col sizes between 100px and 1fr.

Q: fit-content() in grid?
A: fit-content(200px) — content size up to 200px, then clamps.

Q: auto-fit vs auto-fill with minmax?
A: auto-fit collapses empty tracks; auto-fill keeps them — affects layout when items < tracks.

Q: Span an item from line 1 to line 4?
A: grid-column: 1 / 4; (or grid-column-start: 1; grid-column-end: 4;).

Q: Span the entire row?
A: grid-column: 1 / -1; — -1 references the last line.

Q: Negative line numbers?
A: Count from the end: -1 is last, -2 is second to last, etc.

Q: Named lines?
A: grid-template-columns: [start] 200px [main-start] 1fr [end]; — reference by name.

Q: Implicit named grid areas?
A: Naming grid-template-areas automatically creates 4 line names per area (e.g., header-start, header-end).

Q: Use container queries?
A: @container (min-width: 400px) { ... } + container-type: inline-size; on parent.

Q: container-type: size vs inline-size?
A: inline-size: width-only queries.
size: both axes — requires fixed height too.

Q: Container query units?
A: cqw, cqh, cqi, cqb, cqmin, cqmax — relative to container.

Q: Subgrid syntax?
A: grid-template-columns: subgrid; on the child.

Q: Place content vs items vs self?
A: content: aligns the whole grid.
items: aligns each item in its cell.
self: aligns this single item.

Q: Box model interaction?
A: gap is separate from margin/padding; margins on flex children still apply normally.

Q: margin: auto on flex item?
A: Pushes the item to consume free space — useful for "flex-end" of a single item.

Q: Push the last flex item to the end?
A: :last-child { margin-left: auto; } — common nav pattern with a logo on left and links on right.

Q: Equal-height columns with flex?
A: align-items: stretch (default) on flex container — children fill the cross axis.

Q: Equal-height columns with grid?
A: Grid rows stretch by default — children align to row height.

Q: Grid vs Flexbox accessibility note?
A: Tab order follows DOM, not visual order — avoid order and grid-area for non-cosmetic reflow.

Q: order property in flex/grid?
A: Reorders visual position; can break screen reader and keyboard navigation. Use sparingly.

Q: flex item shrinking below content size?
A: Set min-width: 0; — flex items default to min-width: auto which prevents this.

Q: grid item overflowing cell?
A: Same fix: min-width: 0; overflow: hidden; as needed.

Q: flex-grow with images?
A: Images without max-width can blow out the layout — set max-width: 100%; height: auto;.

Q: Why use grid for forms?
A: Aligning labels and inputs into clean rows/columns is much easier with grid-template-columns.

Q: Why use flex for nav bars?
A: 1D layout; items align along one axis with optional gap and spacing.

Q: Vertical center text in a div?
A: display: grid; place-content: center; or display: flex; align-items: center; justify-content: center;

Q: Mixing flex inside grid?
A: Common pattern: grid for page layout, flex for component internals.

Q: Mixing grid inside flex?
A: Also common: flex for outer row of cards, grid for card internals.

Q: Responsive card grid in one line?
A: display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;

Q: Responsive card grid (flex)?
A: display: flex; flex-wrap: wrap; gap: 1rem; + flex: 1 1 200px; on items.

Q: Difference in row wrapping?
A: Grid wraps to next implicit row automatically; flex wraps when flex-wrap is enabled.

Q: display: contents on a flex/grid child?
A: Removes the box but children inherit parent's flex/grid context — useful for screen reader semantics.

Q: display: contents accessibility issue?
A: Older screen readers may skip semantic role — improving in modern browsers but verify.

Q: display: grid + inline?
A: display: inline-grid; — grid container flows inline with text.

Q: display: flex + inline?
A: display: inline-flex; — flex container flows inline.

Q: Block-axis vs inline-axis (logical)?
A: Inline-axis follows text direction; block-axis perpendicular. Logical props (margin-block, etc.) respect writing mode.

Q: Logical equivalents to width/height?
A: inline-size (width), block-size (height).

Q: gap is logical?
A: Yes — uses block-axis and inline-axis automatically.

Q: justify-content options?
A: flex-start, center, flex-end, space-between, space-around, space-evenly.

Q: align-content options?
A: Same as justify-content + stretch (default for multi-line flex).

Q: Difference: space-between vs space-around?
A: between: no edge space.
around: half-space at edges (so center gaps look bigger).

Q: space-evenly?
A: Equal space everywhere, including edges.

Q: Why doesn't justify-content work on single-row flex?
A: It does — it aligns items along main axis when extra space exists.

Q: Why doesn't align-content work on single-row flex?
A: align-content controls multiple rows; with one row, no effect — use align-items instead.

Q: Vertical centering hierarchy of techniques?
A: Flexbox align-items, Grid place-items, table-cell vertical-align, position absolute + transform, line-height.

Q: Pure CSS sticky footer with flex?
A: Body display:flex, flex-direction:column, min-height:100vh; content flex:1; footer hugs the bottom.

Q: Pure CSS sticky footer with grid?
A: Body display:grid, grid-template-rows: 1fr auto; footer auto, content 1fr.

Q: Aspect-ratio property?
A: aspect-ratio: 16 / 9; — modern alternative to padding-top hacks.

Q: object-fit: cover vs contain?
A: cover: fills box, may crop.
contain: fits inside, may letterbox.

Q: object-position?
A: Where the image is positioned within its box — like background-position.

Q: flex-basis with content keyword?
A: flex-basis: content; — sized by content; newer spec, less universal support.

Q: calc() inside grid track?
A: grid-template-columns: calc(50% - 1rem) 1fr; — supported, calculate around gaps.

Q: Calc with gap?
A: width: calc((100% - 2*1rem) / 3); — 3 columns with 1rem gap (flex era trick; modern uses gap).

Q: Why does my flex item not shrink?
A: Default flex-shrink: 1 usually shrinks. If not, check min-width (auto) on item or fixed children inside.

Q: Why does my grid item not fit?
A: Implicit minimum is content-size; add minmax(0, 1fr) or min-width: 0.

Q: Browser support for Grid?
A: Modern browsers since 2017. Subgrid since Firefox 71 (2019), Safari 16 (2022), Chrome 117 (2023).

Q: Browser support for Flexbox?
A: All modern browsers and IE11 (with quirks).

Q: Old-flexbox prefixes?
A: Mostly unnecessary now; check caniuse for legacy needs (IE10 = -ms-).

Q: Grid in older browsers?
A: IE10/11 have an older grid spec — use feature query @supports (display: grid) to opt-in.

Q: @supports feature query?
A: @supports (display: grid) { ... } — apply rules only when supported.

Q: position: sticky + grid?
A: Works inside grid cells; container needs to have height for sticky to fire.

Q: position: absolute child of grid?
A: By default positioned relative to nearest positioned ancestor — set parent position: relative.

Q: Use grid-template-areas for header/sidebar/main/footer?
A: grid-template:
  "header header" 60px
  "side    main"  1fr
  "footer footer" 40px
  / 200px 1fr;

Q: Why is my flex child wider than expected?
A: flex-basis sets initial size; flex-grow distributes extra space. Set flex-basis: 0 for purely proportional widths.

Q: Equal columns regardless of content size?
A: Grid: grid-template-columns: repeat(3, 1fr); — 1fr is share of free space after content.

Q: Equal columns based on content size?
A: Grid: grid-template-columns: repeat(3, auto); — sized by largest content.

Q: Auto-fill empty space with one item?
A: grid-column: 1 / -1; — span all columns.

Q: Inline-block alternative pattern?
A: Modern layouts prefer flex/grid; inline-block had whitespace issues and limited alignment.

Q: Why does flex centering sometimes overflow?
A: When item is wider than container, centering still tries; overflow can be hidden or scrolled.

Q: Difference: overflow: auto vs scroll?
A: auto: scrollbars only when needed.
scroll: scrollbars always shown.

Q: Scroll snap?
A: scroll-snap-type on container + scroll-snap-align on children — carousel-like scrolling.

Q: Sticky header with flex page layout?
A: Header outside the flex content area; or position: sticky; top: 0; with z-index.

Q: flex vs grid for masonry layout?
A: Neither is great natively. CSS native masonry is being standardized as grid-template-rows: masonry;.

Q: Multi-column layout (column-count)?
A: Old API for newspaper-style columns; works for body text but not interactive components.

Q: column-count vs flex/grid?
A: column-count = automatic text-flow; flex/grid = component layout — different use cases.

Q: CSS Grid Tracks Generator?
A: Tools like cssgrid-generator.netlify.app let you visually craft grid templates.

Q: DevTools Grid inspector?
A: Chrome/Firefox DevTools show grid lines, names, and gaps — invaluable for debugging.

Q: DevTools Flexbox inspector?
A: Same toolset highlights flex containers and shows alignment.

Q: isolation: isolate?
A: Creates a new stacking context — useful when blend modes or z-index issues arise inside flex/grid.

Q: contain: content?
A: CSS containment for performance — hints browser that contents don't affect outside layout.

Q: Common newcomer trap: setting display: flex twice nested?
A: No issue; just remember each new flex context starts with default alignment.

Q: flex item's child not stretching?
A: Children need to be flex/grid items themselves or have explicit dimensions; flex item is a block by default.

Q: What does order: 0 do?
A: Default; items render in source order. Negative orders come first.

Q: Tabbing with order?
A: Tab still follows DOM; reordering visually with order can break keyboard nav. Re-order DOM if possible.

Q: Why is my icon misaligned in nav?
A: Likely line-height or baseline; display: flex; align-items: center; on parent fixes it.

Q: SVG sizing in flex?
A: Without intrinsic width, SVG can collapse. Set explicit width/height or use viewBox + flex-basis.

Q: Use case: card with grow-to-fill body and pinned footer?
A: .card { display: flex; flex-direction: column; }; body flex: 1; footer at end.

Q: Use case: header with left, center, right groups?
A: Three nested flex containers OR justify-content: space-between with three direct children grouping internal items.

Q: Use case: image gallery with consistent rows?
A: Grid with grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + aspect-ratio: 1;.

Q: Use case: two-column form?
A: Grid: grid-template-columns: max-content 1fr; + gap.

Q: Use case: pricing table?
A: Grid: 3 columns, with header row spanning, features in rows — easier to align.

Q: Use case: chat layout?
A: Flex column main, scrollable body flex:1, input at bottom with align-self:flex-end.

Q: Use case: sidebar nav?
A: Flex column with sticky position; or grid sidebar area with sticky inner.

Q: Use case: timeline?
A: Grid with named areas alternating left/right; or flex with align-self per item.

Q: Use case: kanban board?
A: Flex row of columns, each column is a flex column of cards.

Q: Use case: settings page with form columns?
A: Grid: 2-column form rows + 1-column section headers.

Q: flex order pitfall?
A: Different order numbers can mask layout intent; comment why or restructure DOM.

Q: gap with old browsers?
A: gap on flexbox was added later than grid; Safari support since 14.1. For older, fall back to margins.

Q: Why is my responsive grid jumping?
A: auto-fit collapses tracks when items can't shrink past minmax minimum — choose minimum carefully.

Q: Difference: 1fr vs auto track?
A: 1fr distributes remaining space; auto sizes by content.

Q: Combining fr with fixed sizes?
A: grid-template-columns: 200px 1fr 200px; — fixed sides, flexible middle.

Q: Combining repeat with minmax and fr?
A: repeat(3, minmax(200px, 1fr)) — 3 columns, each between 200px and 1fr share.

Q: Grid line names with repeat?
A: repeat(3, [col-start] 1fr [col-end]) — multiple lines with same name.

Q: Why do flex items not align baselines?
A: Default align-items: stretch — change to baseline to align text baselines.

Q: Why do my grid lines look thicker?
A: gap is the space between cells, often confused with borders. Border collapse doesn't apply.

Q: overflow: hidden inside flex parent?
A: Useful to hide overflow without scrollbars; can clip absolutely-positioned children unintentionally.

Q: overflow inside grid cell?
A: Each cell is its own scrollable context if needed; overflow: auto on the cell or its content.

Q: CSS reset implications for flex/grid?
A: Most resets are fine; ensure box-sizing: border-box for predictable sizing inside fixed tracks.

Q: Flex item with width: 100%?
A: Item tries to be 100% of container, then flex shrinks it back — usually behaves correctly but check min-width.

Q: flex-basis: percentage?
A: Relative to flex container's main size; useful for "n columns" layout.

Q: flex calc fallback for old browsers?
A: Use percentage flex-basis with calc to account for gaps — less needed since gap support.

Q: will-change: transform inside flex?
A: Promotes element to GPU layer; can help with scroll perf; don't overuse.

Q: Use flex for sticky aside, scroll content?
A: Flex row: aside fixed width, main scrolls — needs main's overflow:auto and parent height.

Q: Common Flex pitfall: collapsed children?
A: Flex children with no content or zero flex-basis can collapse. Set min size.

Q: Common Grid pitfall: missing tracks?
A: Item placed beyond explicit grid → implicit track added; check auto-rows/auto-columns.

Q: Stretch a single flex item to full width on wrap?
A: After wrap, item should have flex-basis: 100%; to take full row.

Q: Stretch a single grid item to full row?
A: grid-column: 1 / -1;

Q: Print styles + flex?
A: Page breaks can be tricky inside flex containers; use page-break-inside: avoid; on items.

Q: Print styles + grid?
A: Each cell flows naturally; complex layouts may behave unexpectedly across pages.

Q: Future: subgrid replacing some flex needs?
A: Yes — multi-level alignment without restructuring DOM, when full browser support lands.

Q: Future: masonry layout?
A: Spec adds grid-template-rows: masonry; — partial impl in Firefox.

Q: View transitions and layout?
A: View Transitions API works across flex/grid; transitions interpolate position smoothly.

Q: Why pick Grid first today?
A: Grid is 2D, more powerful for layouts; flex remains best for 1D component internals.

Q: Decision heuristic?
A: If you're thinking "row OR column", use Flex. If "rows AND columns" with named positions, use Grid.

Q: When to use neither?
A: Single child centering inside a known box: margin auto, position absolute + transform, or place-content if you want flex/grid.

Q: Resources to learn more?
A: CSS Tricks "A Complete Guide to Flexbox" and "A Complete Guide to Grid" — definitive references.

Q: Subgrid track inheritance — what's inherited?
A: Track sizes from the explicit grid; named lines also pass through.

Q: Subgrid with row direction?
A: grid-template-rows: subgrid; — same idea, vertical alignment with parent.

Q: CSS @scope rule for component styling?
A: Scopes selectors to a subtree without specificity boost — newer alternative to BEM and CSS modules.

Q: What is `:has()` selector?
A: Parent selector: div:has(img) — applies to divs containing images. Game-changer for layout-adjacent styling.

Q: Selector `:where()` vs `:is()`?
A: Both group selectors; `:where()` has zero specificity, `:is()` uses highest in the list.

Q: Difference between `grid-template` shorthand and `grid` shorthand?
A: `grid` is the full reset (template + auto-flow + auto-rows/cols); `grid-template` only sets rows/columns/areas.

Q: What is "intrinsic sizing"?
A: Sizes based on content: min-content, max-content, fit-content() — useful for self-sizing tracks.

Q: min-content vs max-content for grid track?
A: min-content: smallest content width (longest word).
max-content: width to fit content without wrapping.

Q: Layout shift (CLS) — how does Grid help?
A: Defining tracks upfront avoids reflow when content arrives. aspect-ratio on images prevents image-load shift.

Q: Use `min-height: 0` on grid items containing scroll?
A: Needed because grid items have implicit `min-height: auto`, which prevents inner content from constraining.