レスポンシブな4x4 CSSグリッド

Question

レスポンシブなCSSグリッドを作成するのは非常に困難です。

________________________________________________________________________ 
| 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 | 
------------------------------------------------------------------------- 

しかし、これは私が携帯電話に出力したいものです：たとえば、これは私がデスクトップに出力したいものである

_____________________________________ 
| 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 | 
------------------------------------ 

私はデスクトップ上に正しく出力しますが、以下のHTMLとCSSを持っていますモバイル上で正しく出力されません。すべての

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

まずそれが<table>を使用しなければならないようなあなたのユースケースを見ると、なぜあなたはdivを使用していますか？ HTMLは既にこの種の表示が必要なときに使用できるテーブル要素を持っています。

第2に、メディアクエリを使用せずにレスポンシブなレイアウトをどのように期待しますか？メディアクエリは、あなたのデザインを反応させるものです。最初のレイアウトはモバイルで、メディアクエリーではデスクトップビューを表示するようにしてください。ここではあなたが達成しようとしていたかの簡易版のようになります。

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; 
    } 
}