Detailed explanation
You can create a responsive card grid without media queries by letting CSS Grid calculate how many columns fit inside the container. Use `.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }`. Here, `repeat()` generates columns automatically, `minmax()` defines their size range, and `gap` creates spacing between them. As the container narrows, fewer columns fit, so items flow into additional rows. This responds to the container’s available width rather than requiring viewport breakpoints, making it useful for reusable components inside sidebars, dashboards, or main content areas.
Under the hood, the browser determines how many repetitions fit using the minimum track size and the gaps. With a definite container width of 700px, three 200px columns and two 16px gaps fit, while four columns do not. The `1fr` maximum then distributes the remaining space equally among the columns, so they grow beyond 200px. Items follow Grid’s default row-wise auto-placement unless you override it. The result is a layout that changes column count automatically while maintaining a practical minimum card width.
The distinction between `auto-fit` and `auto-fill` appears when there are fewer items than available column tracks. Both initially create as many tracks as fit. `auto-fill` preserves unoccupied tracks, leaving room for additional items. `auto-fit` collapses empty repeated tracks and their adjacent gutters, allowing occupied columns to expand with `1fr`. Importantly, a track is empty only if no in-flow grid item occupies or spans it across the grid; `auto-fit` does not independently stretch an incomplete final row when those columns are occupied in earlier rows.
A fixed 200px minimum can overflow a container narrower than 200px. A more defensive declaration is `grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));`, which allows the minimum to shrink to the container width. Long unbreakable text or oversized media may still need `overflow-wrap: anywhere` or responsive media sizing. Interviewers typically look for an explanation of track sizing, empty-track behaviour, and narrow-container handling—not just a memorised snippet. Media queries remain useful for unrelated layout or typography changes.
Key points to remember
- Use `repeat(auto-fit, minmax(200px, 1fr))` to generate flexible columns automatically.
- The available container width, minimum column width, and gaps determine the column count.
- `auto-fit` collapses empty repeated tracks; occupied columns can expand.
- `auto-fill` preserves empty tracks, retaining space for additional columns.
- Use `minmax(min(100%, 200px), 1fr)` to handle containers narrower than the preferred minimum.
Common mistakes candidates make
- Claiming `auto-fit` always stretches the cards in an incomplete final row.
- Ignoring gaps when calculating how many columns fit.
- Assuming a fixed 200px minimum cannot overflow a narrow container.
Likely follow-up questions
When should you choose auto-fill instead of auto-fit?
Choose `auto-fill` when you want unused column slots to remain rather than letting a small number of cards stretch across the container. Choose `auto-fit` when occupied columns should expand into space released by empty tracks.
Why does the last row not always stretch with auto-fit?
CSS Grid shares column tracks across rows. If a column contains an item in an earlier row, that track is not empty and will not collapse just because its last-row position is unoccupied.
Does 1fr mean every column gets an equal percentage of the container?
`1fr` represents one share of available space in Grid’s flexible track sizing, not a fixed percentage. In this pattern, identically sized flexible columns share the available width equally after accounting for gaps, while respecting their minimum sizes.
Interview tip: Start with the CSS snippet, explain the minimum and fractional sizing, then demonstrate the difference using fewer cards than available columns.