Mehrere exact quadratische Felder in Schachbrettform anordnen

Guten Tag und schöne Ostergrüße von einem Neuen.

Als Startpage auf meiner HP habe ich ein schachbrettartiges Layout, basierend auf HTML-Tabellen wobei die einzelnen Felder 150 x 150px groß sind.

Das ist natürlich nicht mehr zeitgemäß und soll nun "responsive" werden, d.h. sich an den aktuellen Viewpunkt anpassen.

CSS-Grid scheint mir da grundsätzlich gut geeignet, ich schaff es aber nicht, die quadratischen Proportionen der Felder in jedem Fall zu erhalten, was mir wichtig ist..

Wer hat `ne Idee für mich, egal ob auf CSS-Grid oder sonstwas basierend aber jedenfalls responsive.

Wer mal zur Verdeutlichung auf die aktuelle Variante schauen will : https://www.heinkele.net

Dank vorab für gute Tips

Die 150 x 150 px sind der Istzustand des uralten Tabellenlayouts. Das ist fix und nicht responsiv. Ist der Viewpunkt zu klein, wird die Seite halt beschnitten.

Dem will ich entkommen, d.h. das Erscheinungsbild der Seite soll grundsätzlich so bleiben wie es ist, sich aber an den aktuellen Screen bzw. das aktuelle Fenster in der Größe anpassen unter Wahrung der vorgegebenen Proportionen.

Dein Beispiel enthält genau das, was ich mir so vorstelle; werde in den nächsten Tagen mal versuchen, es bei mir zu implementieren.

Danke für Deine Mühe !