What is CSS Grid Layout?
A two-dimensional layout system that lets you organize content into rows and columns simultaneously.
How do you create a grid container?
Set display: grid (or display: inline-grid) on the container element.
What is a grid track?
The space between any two adjacent grid lines — essentially a row or a column.
How do you define column tracks?
Use grid-template-columns, e.g. grid-template-columns: 200px 1fr 1fr creates three columns.
What is the fr unit?
A flexible fraction unit that represents a share of the available space in the grid container, e.g. 1fr 2fr gives the second column twice the space.
What does repeat() do?
A shorthand for repeating track definitions, e.g. repeat(3, 1fr) creates three equal columns.
What is the difference between an explicit and implicit grid?
The explicit grid is defined by grid-template-rows/columns. Implicit tracks are auto-created when items are placed outside the explicit grid.
How do you size implicit grid tracks?
Use grid-auto-rows and grid-auto-columns, e.g. grid-auto-rows: 100px.
What does minmax() do?
Defines a size range for a track, e.g. minmax(100px, auto) means at least 100px tall but can grow with content.
How do you place an item using line numbers?
Use grid-column-start/end and grid-row-start/end, e.g. grid-column: 1 / 3 spans from line 1 to line 3.
What is the grid-area property?
A shorthand that can set grid-row-start, grid-column-start, grid-row-end, and grid-column-end in one declaration, or reference a named grid area.
How do you create named grid areas?
Use grid-template-areas with strings representing the layout, e.g. “header header” “nav main” “nav footer”.
What are the rules for grid-template-areas?
Every cell must be filled; repeat a name to span cells; use . for empty cells; areas must be rectangular; areas can’t appear in multiple disconnected locations.
What is the gap property in grid?
Sets the gutter between rows and columns. Accepts one value (both) or two (row-gap column-gap).
How does auto-fill differ from auto-fit in repeat()?
auto-fill creates as many tracks as fit, even if empty. auto-fit collapses empty tracks to zero, letting filled tracks expand.
Can grid items overlap?
Yes — items can be placed in overlapping positions using explicit line-based placement, and z-index controls their stacking.
What is a subgrid?
A nested grid that inherits track definitions from its parent grid, using display: grid and subgrid as a track value.
How does grid layout differ from flexbox?
Grid is two-dimensional (rows and columns), while flexbox is one-dimensional (row or column). They can be used together.
What does grid-auto-flow control?
How auto-placed items fill the grid — by row (default), column, or with dense packing to fill holes.
Does visual reordering with grid affect accessibility?
Yes — screen readers and keyboard navigation follow DOM order, not visual order. Only use grid placement for visual reordering, not logical reordering.
