Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Grid
<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>
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);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$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;
}
@mix3d

This comment has been minimized.

Copy link
Owner Author

@mix3d mix3d commented Nov 5, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment