In a CSS grid container, grid-template-columns: repeat(4, 1fr) creates four columns taking equal fractions. What is the width of each column relative to the container?

In a CSS grid container, grid-template-columns: repeat(4, 1fr) creates four columns taking equal fractions. What is the width of each column relative to the container?

• A. Each column gets a quarter of the container width, i.e., 25%
• B. Each column gets 100px width
• C. The grid becomes a single column
• D. Columns are fixed width regardless of container

Answer: (A)

In CSS Grid, 1fr is a fractional unit that distributes the remaining space evenly among tracks. With four tracks all sized as 1fr, they share the container equally, so each column becomes one quarter of the container’s width—that is, 25%. If you add gaps between columns, those gaps take up some space, so each column ends up a hair less than 25% of the total container width, but the four columns still share the space equally. This isn’t a fixed 100px width, it isn’t turning into a single column, and the widths aren’t fixed regardless of the container.

In CSS Grid, 1fr is a fractional unit that distributes the remaining space evenly among tracks. With four tracks all sized as 1fr, they share the container equally, so each column becomes one quarter of the container’s width—that is, 25%. If you add gaps between columns, those gaps take up some space, so each column ends up a hair less than 25% of the total container width, but the four columns still share the space equally. This isn’t a fixed 100px width, it isn’t turning into a single column, and the widths aren’t fixed regardless of the container.