responsive div based grid

A grid made of div elements. The CSS also dynamically responds to screen size. Headers etc... can use a font-size in percentage to enable them to effectively scale with 'view port' size

by Matt Rummler

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class='container'>
    <!-- -->
    <div class='cell title'>
        The Dynamic Grid Title
    </div>
    <div class='row clearfix'>
        <div class='cell half'>
            row1 cell1
        </div>
        <div class='cell half'>
            row1 cell2 blah blah blah blah blah
        </div>
    </div>
    <div class='row clearfix'>
        <div class='cell third'>
            row2 cell1
        </div>
        <div class='cell third'>
            row2 cell2 stuff stuff stuff stuff
        </div>
        <div class='cell third'>
            row2 cell3
        </div>
    </div>
    <div class='sidebar'>
    </div>
<!-- -->
</div>

CSS

html
{
    width: 100%;
    height: 100%;
}

/* Small screens (default) */
html { font-size: 14px;/*100%;*/ }

/* Medium screens */
@media (min-width: 800px) 
{
  html { font-size: 16px;/*114%;*/ }
}

/* Large screens */
@media (min-width: 1440px) 
{
  html { font-size: 18px;/*122%;*/ }
}

/* Large screens */
@media (min-width: 1920px)
{
  html { font-size: 22px;/*130%;*/ }
}

/* Very Large screens */
@media (min-width: 2048px)
{
  html { font-size: 26px;/*130%;*/ }
}

*, *:before, *:after 
{
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after 
{
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after 
{
    clear: both;
}
.container
{
  margin: 0 auto;
  max-width: 1024px;
  width: 90%;
    box-shadow: 1px 1px 5px #CADFF1;
    border-radius:8px;
}
@media (min-width: 120px) 
{
.cell
{
/*    display:box;
    width: 33.3%;
    height: 90%;
*/
    background-color: #FFFFFF;
    border:solid 2px #AFBCDC;
    float: left;
    /**/
    padding-left: 1%;
    padding-right: 1%;
    /**/
}
.cell.title{width: 100%; text-align: center; font-size: 150%;}
.cell.half{width: 50%;}
.cell.third{width: 33.3%;}
.cell.quarter{width: 25%;}
.cell.fifth{width: 20%;}
.cell.sixth{width: 16.6%;}
.cell.seventh{width: 14.28%;}
.cell.eighth{width: 12.5%;}
.cell.ninth{width: 11.1%;}
.cell.tenth{width: 10%;}
.cell.eleventh{width: 9.09%;}
.cell.twelvth{width: 8.3%;}
.cell.thirteenth{width: 7.69%;}
.cell.fourteenth{width: 7.14%;}
.cell.fifteenth{width: 6.66%;}
.cell.sixteenth{width: 6.25%;}

.cell.flow-opposite{float:right;}
}