CSS Grid: Warum hält 1fr auto 1fr die mittlere Spalte nicht wirklich zentriert?

Ich möchte ein Raster mit wiederholten Spalten erstellen. Die Spalten sollten so groß sein wie der Inhalt der untergeordneten Elemente und dann sollte der verbleibende Platz in einer Spur verteilt...

HTML + CSS

.grid {
display: grid;
grid-template-columns: 100px auto 200px;
grid-template-rows: 50px;
}

.grid > div {
border: 4px solid black;
}

Hallo, ich habe ein sehr seltsames...

HTML + CSS

.grid {
display: grid;
grid-template-columns: 100px auto 200px;
grid-template-rows: 50px;
}

.grid > div {
border: 4px solid black;
}

Hallo, ich habe ein sehr seltsames...

HTML + CSS

.grid {
display: grid;
grid-template-columns: 100px auto 200px;
grid-template-rows: 50px;
}

.grid > div {
border: 4px solid black;
}

Hallo, ich habe ein sehr seltsames...

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, max-content))
}

One
Two
Three
Four
Five
Six
Seven

Grundsätzlich funktioniert das Layout wie erwartet, aber...