Responsive Grid

index.html

<h3>Dynamically sized, 100% width square grid with 1px border, left-hanging final row</h3>
 <p>Note: the borders are colored to show where they are sourced from.</p>
    <p>Quirk: because the leftmost border is sourced from the parent-container, the grid inner container will always be one border-width thinner than the height. At 1px borders, it should be imperceptible</p>

<h4>Static declared columns</h4>
<p>Change the # of columns:
    <button onclick="changegrid(4)">4</button>
    <button onclick="changegrid(5)">5</button>
    <button onclick="changegrid(6)">6</button>
    <button onclick="changegrid(8)">8</button>
    <button onclick="changegrid(10)">10</button>
    <button onclick="changegrid(12)">12</button>
    <button onclick="changegrid(16)">16</button>
</p>
<div>

</div>

<div class="container g12" id="static">
    
    <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
    <div class="grid"><i>I</i></div>
    <div class="grid"><b>B</b></div>
    <div class="grid"><smaller>s</smaller></div>
    <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
        <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
        <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
        <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
</div>

<h4>Responsive re-ordering:</h4>
<div class="container auto">
    <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
    <div class="grid"><i>I</i></div>
    <div class="grid"><b>B</b></div>
    <div class="grid"><smaller>s</smaller></div>
    <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
        <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
        <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
        <div class="grid"><span>S</span></div>
    <div class="grid"><div>D</div></div>
</div>
    

Responsive Grid.markdown

Responsive Grid

Dynamically resized, 100% width grid with 1px borders, centered content, variable columns.

A Pen by Madison Dickson on CodePen.

License.

script.js

function changegrid(n) {
  $("#static").removeClass("g16 g15 g14 g13 g12 g11 g10 g9 g8 g7 g6 g5 g4 g3 g2 g1");
  $("#static").addClass("g" + n);
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$grid-columns: 16;
$grid-ratio:1/1; /*width to height ratio: 16/9, 4/3, 1/1, etc*/ 
$border-width:1px;

@for $i from 1 through $grid-columns {
  .g#{$i} { 
      .grid{width:100%/$i;padding-bottom:100%/($i*$grid-ratio)}
      .grid:nth-child(-n+#{$i}){border-top:$border-width solid purple;}
  }
}
/** Example output for 16 grid columns: **
.g16 .grid{width:6.25%;padding-bottom:6.25%;}
.g16 .grid:nth-child(-n+16){border-top:1px solid purple;}
 */
$breaks: 300px 400px 500px 600px 700px 800px 900px 1000px;
$break-diff: 2;

//default is 16 columns

.auto { .grid{width:6.25%;padding-bottom:6.25%}
          .grid:nth-child(-n+16){border-top:$border-width solid purple;}
      } 

$len : length($breaks)-1;

@for $i from $len through 1 {
    
    $max: nth($breaks,$i+1);
    $min: nth($breaks,$i)+1px;
    
    @media(max-width: $max) and (min-width: $min ){
      .auto {
          .grid{
              width:100%/($i*$break-diff);
              padding-bottom:100%/($i*$break-diff*$grid-ratio)
          }
          .grid:nth-child(-n+#{$i*$break-diff}){
              border-top:$border-width solid purple;
          }
          .grid:not(:nth-child(-n+#{$i*$break-diff})){
              border-top:none;
          }
      }
  }
}

/* Bootstrap-like automatic clearfix for the grid container*/
.container:after{
    content:" ";
    display:block;
    clear:both;
}
.container{
    width:100%;
    border-left:$border-width solid red;
    background:lightgray;
}
.container .grid{
    display:inline-block;
    border-right:$border-width solid green;
    border-bottom:$border-width solid green;
    background:white;
    position:relative;
    margin:0px;
    float:left;
    box-sizing: border-box;
}
.container .grid > *{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:40px;
    overflow:hidden;
}

http://codepen.io/mix3d/pen/VvGGrv