What does grid-template-columns: repeat(3, 1fr) do in a grid container?

What does grid-template-columns: repeat(3, 1fr) do in a grid container?

• A. Creates three fixed-width columns
• B. Creates three auto-sized columns
• C. Creates a single column repeated three times
• D. Creates three equal-width columns, each taking an equal fraction of available space.

Answer: (D)

Using fractional units to allocate space, grid-template-columns with repeat(3, 1fr) sets up three grid tracks that each take an equal share of the available width. The repeat() function repeats the same size three times, so you get three tracks, each sized 1fr. The 1fr unit means one portion of the remaining space in the grid container. Because all three columns use 1fr, that remaining space is divided evenly among them, giving three equal-width columns that fill the container. If the container is 900px wide and there are no other constraints, each column will be 300px wide (adjusting for any gaps, padding, or borders). This differs from fixed widths, which would force a specific pixel size, or auto sizing, which would size columns to fit their content.

Using fractional units to allocate space, grid-template-columns with repeat(3, 1fr) sets up three grid tracks that each take an equal share of the available width. The repeat() function repeats the same size three times, so you get three tracks, each sized 1fr. The 1fr unit means one portion of the remaining space in the grid container. Because all three columns use 1fr, that remaining space is divided evenly among them, giving three equal-width columns that fill the container. If the container is 900px wide and there are no other constraints, each column will be 300px wide (adjusting for any gaps, padding, or borders). This differs from fixed widths, which would force a specific pixel size, or auto sizing, which would size columns to fit their content.