Frage CSS - Grid - Timeline in letzter Spalte und allen Reihen?

[Kijupo]

Moin,

ich habe eine Bildervorschau mit Grid in CSS gelöst. Dort werden mir in der Reihe 8 Vorschaubilder angezeigt, da ich eine Maximallänge von 1200px definiert habe und mittels

grid-auto-flow: row dense;

durchgehend wiedergegeben. Dieser Befehl ist für mein allgemeines Vorhaben unerlässlich.

Man kann sich den Aufbau der HTML wie folgt vorstellen:

<div class="container"> /* bestimmt die maximale länge */
<div class="main">
   <div>Bild 1</div>
   <div>Bild 2</div>
   <div>Bild 3</div>
   <div>Bild 4</div>
   <div>Bild 5</div>
   <div>Bild 6</div>
   <div>Bild 7</div>
   <div>Bild 8</div>
   <div class="timeline"></div>
</div>
</div>

Sehe den Vorteil darin, dass die TimeLine Komponente genau dort abschließt, wo auch das letzte Bild in der Reihe abschließen würde.

Um es Resposive zu halten, kommen in den entsprechenden @media Abschnitten die

grid-template-columns

hinein.
z.B.

@media screen and (min-width: 800px) {
    .main {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

Jetzt möchte ich aber in der letzten Spalte eine festsitzende Timeline einbauen und die Vorschaubilder damit in eine neue Spalte zwingen.
Meine derzeitige Idee sieht wie folgt aus:

.timeline {
    display: grid;
    grid-column: 8 / -1; /* letzte Spalte */
    grid-row: 1 / span 99; /*vorerst alle Reihen */
    grid-template-rows: 30px 250px 30px;
    justify-self: center;
    max-width: 100px;
    max-height: 350px;
    position: sticky;
    top: 80px;
}

Dieses funktioniert so auch bereits. Allersingst mehr schlecht als Recht. Warum? Weil

grid-row: 1 / span 99;

Schwachsinn ist und so nicht stehen bleiben kann. grid-row: 1 / -1 funktioniert aber bei mir nicht. Und sonst habe ich auch nichts passendes gefunden.

Am Ende sollte es so aussehen:


Kann mir da bitte wer weiterhelfen?