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

  • Soll das so aussehen wie im Link oder wie hättest du es gerne?


    EDIT: Guck mal, ob das so in der Art passt oder was geändert haben möchtest

    https://basti1012.bplaced.net/…rdner=html-seminar&id=323

    Die quadrate wachsen jetzt mit.

    Da du aber was von 150px geschrieben hast, musst du die Größe noch ändern ,falls du eine feste Größe vergeben willst

  • 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 !