Dynamically resized, 100% width grid with 1px borders, centered content, variable columns.
A Pen by Madison Dickson on CodePen.
Created
November 5, 2015 21:58
-
-
Save mix3d/2d783e6b77e4039b151b to your computer and use it in GitHub Desktop.
Responsive Grid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $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; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
http://codepen.io/mix3d/pen/VvGGrv