Detailed explanation
CSS Grid is a two-dimensional layout system: it controls columns and rows together, unlike Flexbox, which primarily arranges items along one axis at a time. Setting display: grid on an element makes it a grid container, and its direct children normally become grid items. The spaces between neighbouring grid lines are called tracks. A column is a vertical track, while a row is a horizontal track. Grid is useful for page layouts, dashboards, and card collections where alignment across both axes matters.
The grid-template-columns and grid-template-rows properties define the sizes of explicit tracks. Each space-separated value describes one track: grid-template-columns: 200px 1fr 1fr creates three columns, while grid-template-rows: auto 1fr auto creates three rows. Items without explicit placement are automatically placed into available cells, normally proceeding row by row. If more tracks are needed than the template defines, Grid creates implicit tracks, whose sizes can be controlled using grid-auto-rows or grid-auto-columns. The gap: 16px declaration adds spacing between tracks, not around the container’s outer edge.
The fr unit represents a share of the available space allocated to flexible tracks. In the example, the first column is fixed at 200px, and the other two share the remaining width equally, after accounting for gaps and track-sizing constraints. If the container’s content width is 1000px, two 16px gaps leave 768px after the fixed column, so each flexible column receives 384px, assuming content minimums do not interfere. Changing the values to 200px 1fr 2fr divides that flexible space in a 1:2 ratio; fr is not a percentage of the entire container.
For rows, auto 1fr auto is often used for a header, main section, and footer. With a definite container height, the middle row can take the space left by the content-sized outer rows and gaps. Without a definite height, do not assume it fills the viewport; content influences sizing. Another important detail is that a bare 1fr track has an automatic minimum, so wide content can prevent shrinking. Using minmax(0, 1fr) permits the track to shrink below that content-based minimum, although overflowing content may still need handling.
Key points to remember
- display: grid creates a two-dimensional layout for direct children.
- grid-template-columns and grid-template-rows define explicit column and row track sizes.
- fr shares available flexible space proportionally, after gaps and other sizing constraints.
- auto 1fr auto can allocate remaining height to the middle row when the container has a definite height.
- minmax(0, 1fr) removes a flexible track’s automatic content-based minimum.
Common mistakes candidates make
- Treating 1fr as a fixed percentage of the container rather than a share of flexible space.
- Expecting a 1fr row to fill the viewport without establishing an appropriate container height.
- Assuming 1fr tracks always shrink enough to prevent overflow from long text or wide content.
Likely follow-up questions
How is fr different from percentages?
Percentage column widths are generally calculated against the grid container’s content width, whereas fr distributes flexible space after accounting for gaps and other tracks. For example, two 50% columns plus a gap can overflow, while two 1fr columns normally accommodate the gap, subject to content minimums.
What does repeat(3, 1fr) mean?
It is shorthand for 1fr 1fr 1fr, creating three equally flexible tracks. For three columns that can shrink below their content-based minimums, use repeat(3, minmax(0, 1fr)).
What is the difference between explicit and implicit tracks?
Explicit tracks are defined by the grid template. Implicit tracks are created when auto-placement or explicit item placement requires tracks outside that template, and grid-auto-rows or grid-auto-columns controls their sizing.
Interview tip: Explain tracks first, calculate the example’s column widths, and then mention the height requirement for flexible rows.