repeat(auto-fit, minmax(auto, 1fr) is not valid syntax

I want to create a grid with repeated columns. The columns should be as large as the children's content and then the remaining space in a track should be distributed.I thought I could achieve this with the below, but it's not valid syntax apparently.

repeat(auto-fit, minmax(auto, 1fr)

Would appreciate if someone explains me what I am misunderstanding here, why this is not possible.

I wanted a grid with card children that are flexbox so I can allign avatars in them.

I guess this could also be achieved with flexbox and wrapping. But I thought grid was made for this..

Something like:

.player-display {  display: grid;  gap: 12px;  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));}.player-card {  display: flex;  flex-direction: column;  align-items: center;}

<div class="player-display> <div class="player-card"><div class="player-avatar"><div class="player-name"></div>