Centering grid items in an auto-fill container

Question

I have set up a grid with two items. This grid can contain any number of items but two is enough for this example.

Background

In the example there are two

Answer 1

That's because of the max value set with minmax is too small.

You need to set the max value to 50%. Because you have grid-gap:1rem this become calc(50% - 1rem).

See this fiddle:

https://jsfiddle.net/1ymkg327/24/

EDIT:

I unerstood your question now, and come up with the solution:

https://jsfiddle.net/1ymkg327/40/