css-grid auto column width

Question

I'm working on a UI with css grid and have been seeing a slightly odd behaviour, namely that if I define a grid with:

grid-template-columns: 50px auto 50px

I'm not seeing that grid expand to 100% of the width of the container as shown in this image:

If I make the content in the auto area wider to the extend where it would force the grid to fill the space, the problem seems to go away. But my understanding and in all the examples i've seen suggests that this template should extend to 100% of the width of the viewport.

Am I missing something here? certainly feels like it, any thoughts?

Solution

In your rule:

grid-template-columns: 50px auto 50px

The auto value sets the column width to the width of the content. auto means content-based.

So the total width of the columns ends up having no association with the width of the row.

50px + content width + 50px can be anything

If you want the columns to fill the width of the row, then use a fraction unit to tell the second column to consume all remaining space.

grid-template-columns: 50px 1fr 50px

More details here: Does CSS Grid have a flex-grow function?