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 sonst was basierend aber jedenfalls responsive. Wer mal zur Verdeutlichung auf die aktuelle Variante schauen will : https://www.heinkele.net Dank vorab für gute Tipps

Der hier verwendete Code

<style> #wrapper{ height:70vw; width:auto; display: flex; flex-direction: column; } .line{ display:flex; flex:1; } .box{ border:1px solid black; flex:1; } </style> <div id="wrapper"> <div class="line"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="line"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="line"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!