What does grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) do?

• A. Creates a single column of 200px.
• B. Creates as many 200px-wide columns as fit; extra columns fill remaining space.
• C. Creates fixed columns that do not fill space.
• D. Creates columns that always stay at 200px.

Answer: (B)

This setup makes the grid responsive by creating as many columns as fit in the container, with each column at least 200px wide and allowed to grow to fill the remaining space evenly.

The repeat(auto-fill, minmax(200px, 1fr)) part determines how many tracks (columns) are created based on the container’s width. Each track uses the size spec minmax(200px, 1fr): the column can’t be narrower than 200px, but when there’s extra horizontal space, all columns share it equally thanks to the 1fr fractional unit. So as the container gets wider, the grid adds more columns up to the space available, and existing columns widen to use leftover space.

Note that if there aren’t enough items to fill every created column, extra (empty) columns still exist and can stretch, which is a normal behavior of auto-fill with flexible tracks.

In short, you get multiple columns that stay at least 200px but expand to fill the row, automatically wrapping as needed.