Sweepster Sweepster - 5 months ago 72
CSS Question

Responsive 4x4 CSS grid

I am having a very hard time creating a responsive CSS grid. For example, this is what I want outputted on desktops:

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


But this is what I want outputted on mobiles:

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


I have the following HTML and CSS that outputs correctly on desktop but it doesn't output correctly on mobiles.

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


Thank you

Answer

First of all, why are you using divs when your use case look like it should be using <table>? HTML has already a table element ready to use when you need this sort of display.

Second of all, how do you expect to have a responsive layout without using media queries? Media queries are what will make your design responsive. You should always make sure to have your initial layout mobile first, and media queries to display the desktop view. Here would be a simplified version of what you were trying to achieve:

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