Responsive 4x4 CSS Gitter

Question

Ich habe es sehr schwer ein reaktionsfähiges CSS Gitter zu erstellen. Zum Beispiel ist es das, was ich auf Desktop-Rechner ausgegeben werden soll:

________________________________________________________________________ 
| Stat 1 | Stat 2 | Stat 3 | Stat 4 | Stat 5 | Stat 6 | Stat 7 | Stat 8 | 
|-----------------------------------------------------------------------| 
| Info 1 | Info 2 | info 3 | info 4 | Info 5 | Info 6 | Info 7 | Info 8 | 
------------------------------------------------------------------------- 

Aber das ist, was ich auf dem Handy ausgegeben werden soll:

_____________________________________ 
| Stat 1 | Stat 2 | Stat 3 | Stat 4 | 
|------------------------------------ 
| Info 1 | Info 2 | info 3 | info 4 | 
------------------------------------- 
| Stat 5 | Stat 6 | Stat 7 | Stat 8 | 
|-----------------------------------| 
| Info 5 | Info 6 | Info 7 | Info 8 | 
------------------------------------ 

Ich habe folgende HTML und CSS, die korrekt auf dem Desktop gibt, aber es wird auf Handys nicht korrekt ausgegeben.

HTML

<div id="statcontainer"> 
    <div class="stat-header row clearfix"> 
      <div class="stat-value"> 
       Stat 1 
      </div> 

      <div class="stat-value"> 
       Stat 2 
      </div> 

      <div class="stat-value"> 
       Stat 3 
      </div> 

      <div class="stat-value"> 
       Stat 4 
      </div> 

      <div class="stat-value"> 
       Stat 5 
      </div> 

      <div class="stat-value"> 
       Stat 6 
      </div> 

      <div class="stat-value"> 
       Stat 7 
      </div> 

      <div class="stat-value"> 
       Stat 8 
      </div> 
    </div> 

    <div class="stat-content row clearfix"> 
      <div class="stat-value"> 
       info 1 
      </div> 

      <div class="stat-value"> 
       info 2 
      </div> 

      <div class="stat-value"> 
       info 3 
      </div> 

      <div class="stat-value"> 
       info 4 
      </div> 

      <div class="stat-value"> 
       info 5 
      </div> 

      <div class="stat-value"> 
       info 6 
      </div> 

      <div class="stat-value"> 
       info 7 
      </div> 

      <div class="stat-value"> 
       info 8 
      </div> 
    </div> 
</div> 

CSS

.statcontainer { 
    display: table; 
} 

.stat-header { 
    display: table-row; 
    font-weight: bold; 
    text-align: center; 
} 

.stat-content { 
    display: table-row; 
} 

.stat-value { 
    display: table-cell; 
    border: solid; 
    border-width: thin; 
    padding-left: 5px; 
    padding-right: 5px; 
} 

Answer 1

Zunächst einmal, warum Sie verwenden divs, wenn Ihr Anwendungsfall aussehen sollte es <table> verwenden? HTML hat bereits ein Tabellenelement zur Verfügung, wenn Sie diese Art von Anzeige benötigen.

Zweitens, wie erwarten Sie ein reaktionsfähiges Layout ohne Medienabfragen zu verwenden? Medienanfragen sind das, was Ihr Design anspricht. Sie sollten immer sicherstellen, dass Ihr anfängliches Layout mobil ist, und Medienabfragen, um die Desktopansicht anzuzeigen. Hier wäre eine vereinfachte Version von dem, was Sie erreichen wollten:

https://jsfiddle.net/n4xoj2ju/

HTML:

<table> 
    <tr> 
    <td> 
     Stat 1 
    </td> 
    <td> 
     Stat 2 
    </td> 
    <td> 
     Stat 3 
    </td> 
    <td> 
     Stat 4 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Info 1 
    </td> 
    <td> 
     Info 2 
    </td> 
    <td> 
     Info 3 
    </td> 
    <td> 
     Info 4 
    </td> 
    </tr> 
</table><table> 
    <tr> 
    <td> 
     Stat 5 
    </td> 
    <td> 
     Stat 6 
    </td> 
    <td> 
     Stat 7 
    </td> 
    <td> 
     Stat 8 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Info 5 
    </td> 
    <td> 
     Info 6 
    </td> 
    <td> 
     Info 7 
    </td> 
    <td> 
     Info 8 
    </td> 
    </tr> 
</table> 

CSS:

table tr:first-child { 
    font-weight: bold; 
} 

@media (min-width: 300px) { 
    table { 
    display: inline-block; 
    } 
}