Question 1

What problem does CSS Grid solve?

Accepted Answer

Two-dimensional layout with rows and columns, including overlapping and precise placement. Ideal for page shells and complex component layouts. Complements flex for 1D.

Question 2

fr units vs % vs auto in tracks?

Accepted Answer

fr shares free space; % is definite percentage; auto is content-based sizing. minmax(0, 1fr) often needed to allow shrinking below content. repeat(auto-fit, minmax()) for responsive grids.

Question 3

Explain grid-template-areas.

Accepted Answer

Name cells and place items with grid-area for readable layouts. Ascii-art templates help maintain page regions. Quotes per row must align cell counts.

Question 4

auto-fit vs auto-fill?

Accepted Answer

Both create as many tracks as fit; auto-fit collapses empty tracks, auto-fill keeps them. Affects how items expand into leftover space with minmax.

Question 5

How do implicit vs explicit grids differ?

Accepted Answer

Explicit tracks defined by templates; implicit tracks created by placement overflow. grid-auto-rows/columns style implicit tracks. Unexpected rows often mean placement bugs.

Question 6

alignment: justify-items vs justify-content in grid?

Accepted Answer

items aligns content inside cells; content aligns the grid when smaller than container. Also place-items/place-content shorthands. stretch is default for items.

Question 7

How do you overlap items intentionally?

Accepted Answer

Place multiple items into same cells or use line-based spans/z-index. Useful for badges on cards, decorative layers. Manage stacking contexts.

Question 8

subgrid — what is it for?

Accepted Answer

Lets child grids inherit parent track sizing for aligned nested columns/rows. Powerful for card internals aligning across a list. Support considerations.

Question 9

minmax and responsive card grids pattern?

Accepted Answer

repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) creates fluid columns. Avoid fixed column counts when content should reflow naturally.

Question 10

Grid vs absolute positioning for dashboards?

Accepted Answer

Grid keeps flow/accessibility and responsive reflow; absolute is brittle for content size changes. Absolute for decorative overlays inside a grid cell can still be fine.

Question 11

Why does 1fr behave like minmax(auto, 1fr) and overflow?

Accepted Answer

Tracks won't shrink below content min by default; use minmax(0,1fr) to allow. Same family of bugs as flex min-size. Truncation needs overflow hidden + min 0.

Question 12

Named lines — when useful?

Accepted Answer

Readable placement like grid-column: main-start / main-end in complex templates. Helps large layout systems. Document line names in the design system.

Question 13

Define a page layout system with grid areas.

Accepted Answer

Shell template areas for header/nav/main/aside/footer; components use nested grids/flex. Collapse areas responsively by redefining templates. Keep landmarks in HTML, not only CSS.

Grid CSS Interview Questions

Other CSS interview topics