basti1012.bplaced.net

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 : <a href="https://www.heinkele.net">https://www.heinkele.net</a> Dank vorab für gute Tipps

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>