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>