Created
December 2, 2011 19:21
-
-
Save LeeRJohnson/1424483 to your computer and use it in GitHub Desktop.
My CSS Grid Variations Archive
This file contains 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.css | |
| * Sets up an easy-to-use grid of 24 columns. | |
| By default, the grid is 950px wide, with 24 columns | |
| spanning 30px, and a 10px margin between columns. | |
| -------------------------------------------------------------- */ | |
| /* A container should group all your columns. */ | |
| /* Added: New EM width for container class approximates | |
| 950px width based on default font size. | |
| by Lee R Johnson (LRJ) 2008-03-08 | |
| */ | |
| .container { | |
| width:79.2em; | |
| -px-width:950px; | |
| max-width:100%; | |
| margin: 1.5em auto; | |
| } | |
| /* Use this class on any div.span / container to see the grid. */ | |
| .showgrid { | |
| background:url(grid.png); | |
| } | |
| /* Body margin for a sensile default look. */ | |
| html, body { | |
| margin:0; | |
| } | |
| /* Columns | |
| -------------------------------------------------------------- */ | |
| /* Sets up basic grid floating and margin. */ | |
| .span-1, .span-2, .span-3, .span-4, .span-5, | |
| .span-6, .span-7, .span-8, .span-9, .span-10, | |
| .span-11, .span-12, .span-13, .span-14, .span-15, | |
| .span-16, .span-17, .span-18, .span-19, .span-20, | |
| .span-21, .span-22, .span-23, .span-24 { | |
| float: left; | |
| /* Change: approximate EM width of orginal 10px margin (LRJ)*/ | |
| margin-right: .833em; | |
| max-width:100%; | |
| } | |
| /* Use these classes to set the width of a column. */ | |
| /* Added by Lee R Johnson 2008-03-08. | |
| EM widths aproximate original pixel widths based | |
| based on default font-size. -px-width is a holder; | |
| */ | |
| .span-1 { width: 2.5em; -px-width: 30px; } | |
| .span-2 { width: 5.833em; -px-width: 70px; } | |
| .span-3 { width: 9.166em; -px-width: 110px; } | |
| .span-4 { width: 12.5em; -px-width: 150px; } | |
| .span-5 { width: 15.833em; -px-width: 190px; } | |
| .span-6 { width: 19.166em; -px-width: 230px; } | |
| .span-7 { width: 22.5em; -px-width: 270px; } | |
| .span-8 { width: 25.833em; -px-width: 310px; } | |
| .span-9 { width: 29.166em; -px-width: 350px; } | |
| .span-10 { width: 32.5em; -px-width: 390px; } | |
| .span-11 { width: 35.833em; -px-width: 430px; } | |
| .span-12 { width: 39.166em; -px-width: 470px; } | |
| .span-13 { width: 42.496em; -px-width: 510px; } | |
| .span-14 { width: 45.829em; -px-width: 550px; } | |
| .span-15 { width: 49.162em; -px-width: 590px; } | |
| .span-16 { width: 52.5em; -px-width: 630px; } | |
| .span-17 { width: 55.828em; -px-width: 670px; } | |
| .span-18 { width: 59.161em; -px-width: 710px; } | |
| .span-19 { width: 62.494em; -px-width: 750px; } | |
| .span-20 { width: 65.827em; -px-width: 790px; } | |
| .span-21 { width: 69.160em; -px-width: 830px; } | |
| .span-22 { width: 72.493em; -px-width: 870px; } | |
| .span-23 { width: 75.826em; -px-width: 910px; } | |
| .span-24 { width: 79.2em; -px-width: 950px; } | |
| /* The last column in a row needs this class. */ | |
| .last, span-24{ margin-right: 0; } | |
| /* Add these to a column to append empty cols. */ | |
| .append-1 { padding-right: 3.333em; } | |
| .append-2 { padding-right: 6.666em; } | |
| .append-3 { padding-right: 9.999em; } | |
| .append-4 { padding-right: 13.332em; } | |
| .append-5 { padding-right: 16.665em; } | |
| .append-6 { padding-right: 19.998em; } | |
| .append-7 { padding-right: 23.331em; } | |
| .append-8 { padding-right: 26.664em; } | |
| .append-9 { padding-right: 29.997em; } | |
| .append-10 { padding-right: 33.33em; } | |
| .append-11 { padding-right: 36.663em; } | |
| .append-12 { padding-right: 39.996em; } | |
| .append-13 { padding-right: 43.329em; } | |
| .append-14 { padding-right: 46.662em; } | |
| .append-15 { padding-right: 49.995em; } | |
| .append-16 { padding-right: 53.328em; } | |
| .append-17 { padding-right: 56.661em; } | |
| .append-18 { padding-right: 59.994em; } | |
| .append-19 { padding-right: 63.327em; } | |
| .append-20 { padding-right: 66.66em; } | |
| .append-21 { padding-right: 69.993em; } | |
| .append-22 { padding-right: 73.326em; } | |
| .append-23 { padding-right: 76.659em; } | |
| .append-24 { padding-right: 79.992em; } | |
| /* Add these to a column to prepend empty cols. */ | |
| .prepend-1 { padding-left: 3.333em; } | |
| .prepend-2 { padding-left: 6.666em; } | |
| .prepend-3 { padding-left: 9.999em; } | |
| .prepend-4 { padding-left: 13.332em; } | |
| .prepend-5 { padding-left: 16.665em; } | |
| .prepend-6 { padding-left: 19.998em; } | |
| .prepend-7 { padding-left: 23.331em; } | |
| .prepend-8 { padding-left: 26.664em; } | |
| .prepend-9 { padding-left: 29.997em; } | |
| .prepend-10 { padding-left: 33.33em; } | |
| .prepend-11 { padding-left: 36.663em; } | |
| .prepend-12 { padding-left: 39.996em; } | |
| .prepend-13 { padding-left: 43.329em; } | |
| .prepend-14 { padding-left: 46.662em; } | |
| .prepend-15 { padding-left: 49.995em; } | |
| .prepend-16 { padding-left: 53.328em; } | |
| .prepend-17 { padding-left: 56.661em; } | |
| .prepend-18 { padding-left: 59.994em; } | |
| .prepend-19 { padding-left: 63.327em; } | |
| .prepend-20 { padding-left: 66.66em; } | |
| .prepend-21 { padding-left: 69.993em; } | |
| .prepend-22 { padding-left: 73.326em; } | |
| .prepend-23 { padding-left: 76.659em; } | |
| .prepend-24 { padding-left: 79.992em; } | |
| /* Use these classes on an element to push it into the | |
| next column, or to pull it into the previous column. */ | |
| .pull-1 { margin-left: -3.333em; } | |
| .pull-2 { margin-left: -6.666em; } | |
| .pull-3 { margin-left: -9.999em; } | |
| .pull-4 { margin-left: -13.332em; } | |
| .pull-5 { margin-left: -16.665em; } | |
| .pull-1, .pull-2, .pull-3, | |
| .pull-4, .pull-5, .pull-5 { | |
| float:left; | |
| position:relative; | |
| } | |
| .push-1 { margin: 0 -3.333em 1.5em; } | |
| .push-2 { margin: 0 -6.666em 1.5em; } | |
| .push-3 { margin: 0 -9.999em 1.5em; } | |
| .push-4 { margin: 0 -13.332em 1.5em; } | |
| .push-5 { margin: 0 -16.665em 1.5em 16.665em; } | |
| .pull-6 { margin-left:-19.998em; } .push-6 { margin-left:19.998em;margin-right:-19.998em; } | |
| .pull-7 { margin-left:-23.331em; } .push-7 { margin-left:23.331em;margin-right:-23.331em; } | |
| .pull-8 { margin-left:-26.664em; } .push-8 { margin-left:26.664em;margin-right:-26.664em; } | |
| .pull-9 { margin-left:-29.997em; } .push-9 { margin-left:29.997em;margin-right:-29.997em; } | |
| .pull-10 { margin-left:-33.33em; } .push-10 { margin-left:33.33em;margin-right:-33.33em; } | |
| .pull-11 { margin-left:-36.663em; } .push-11 { margin-left:36.663em;margin-right:-36.663em; } | |
| .pull-12 { margin-left:-39.996em; } .push-12 { margin-left:39.996em;margin-right:-39.996em; } | |
| .pull-13 { margin-left:-43.329em; } .push-13 { margin-left:43.329em;margin-right:-43.329em; } | |
| .pull-14 { margin-left:-46.662em; } .push-14 { margin-left:46.662em;margin-right:-46.662em; } | |
| .pull-15 { margin-left:-49.995em; } .push-15 { margin-left:49.995em;margin-right:-49.995em; } | |
| .pull-16 { margin-left:-53.328em; } .push-16 { margin-left:53.328em;margin-right:-53.328em; } | |
| .pull-17 { margin-left:-56.661em; } .push-17 { margin-left:56.661em;margin-right:-56.661em; } | |
| .pull-18 { margin-left:-59.994em; } .push-18 { margin-left:59.994em;margin-right:-59.994em; } | |
| .pull-19 { margin-left:-63.327em; } .push-19 { margin-left:63.327em;margin-right:-63.327em; } | |
| .pull-20 { margin-left:-66.66em; } .push-20 { margin-left:66.66em;margin-right:-66.66em; } | |
| .pull-21 { margin-left:-69.993em; } .push-21 { margin-left:69.993em;margin-right:-69.993em; } | |
| .pull-22 { margin-left:-73.326em; } .push-22 { margin-left:73.326em;margin-right:-73.326em; } | |
| .pull-23 { margin-left:-76.659em; } .push-23 { margin-left:76.659em;margin-right:-76.659em; } | |
| .push-0, .push-1, .push-2, | |
| .push-3, .push-4, .push-5 { | |
| float: right; | |
| position:relative; | |
| } | |
| /* Extended widths */ | |
| .span-25 { width: 82.492em!important; } .append-25 { padding-right: 83.325em!important; } .prepend-25 { padding-left: 83.325em!important; } .pull-25 { margin-left:-83.325em!important; } .push-25 { margin-left:83.325em!important;margin-right:-83.325em!important; } | |
| .span-26 { width: 85.825em!important; } .append-26 { padding-right: 86.658em!important; } .prepend-26 { padding-left: 86.658em!important; } .pull-26 { margin-left:-86.658em!important; } .push-26 { margin-left:86.658em!important;margin-right:-86.658em!important; } | |
| .span-27 { width: 89.158em!important; } .append-27 { padding-right: 89.991em!important; } .prepend-27 { padding-left: 89.991em!important; } .pull-27 { margin-left:-89.991em!important; } .push-27 { margin-left:89.991em!important;margin-right:-89.991em!important; } | |
| .span-28 { width: 92.491em!important; } .append-28 { padding-right: 93.324em!important; } .prepend-28 { padding-left: 93.324em!important; } .pull-28 { margin-left:-93.324em!important; } .push-28 { margin-left:93.324em!important;margin-right:-93.324em!important; } | |
| .span-29 { width: 95.824em!important; } .append-29 { padding-right: 96.657em!important; } .prepend-29 { padding-left: 96.657em!important; } .pull-29 { margin-left:-96.657em!important; } .push-29 { margin-left:96.657em!important;margin-right:-96.657em!important; } | |
| .span-30 { width: 99.157em!important; } .append-30 { padding-right: 99.99em!important; } .prepend-30 { padding-left: 99.99em!important; } .pull-30 { margin-left:-99.99em!important; } .push-30 { margin-left:99.99em!important;margin-right:-99.99em!important; } | |
| .span-31 { width: 102.49em!important; } .append-31 { padding-right: 103.323em!important; } .prepend-31 { padding-left: 103.323em!important; } .pull-31 { margin-left:-103.323em!important; } .push-31 { margin-left:103.323em!important;margin-right:-103.323em!important; } | |
| .span-32 { width: 105.823em!important; } .append-32 { padding-right: 106.656em!important; } .prepend-32 { padding-left: 106.656em!important; } .pull-32 { margin-left:-106.656em!important; } .push-32 { margin-left:106.656em!important;margin-right:-106.656em!important; } | |
| .span-33 { width: 109.156em!important; } .append-33 { padding-right: 109.989em!important; } .prepend-33 { padding-left: 109.989em!important; } .pull-33 { margin-left:-109.989em!important; } .push-33 { margin-left:109.989em!important;margin-right:-109.989em!important; } | |
| .span-34 { width: 112.489em!important; } .append-34 { padding-right: 113.322em!important; } .prepend-34 { padding-left: 113.322em!important; } .pull-34 { margin-left:-113.322em!important; } .push-34 { margin-left:113.322em!important;margin-right:-113.322em!important; } | |
| .span-35 { width: 115.822em!important; } .append-35 { padding-right: 116.655em!important; } .prepend-35 { padding-left: 116.655em!important; } .pull-35 { margin-left:-116.655em!important; } .push-35 { margin-left:116.655em!important;margin-right:-116.655em!important; } | |
| .span-36 { width: 119.155em!important; } .append-36 { padding-right: 119.988em!important; } .prepend-36 { padding-left: 119.988em!important; } .pull-36 { margin-left:-119.988em!important; } .push-36 { margin-left:119.988em!important;margin-right:-119.988em!important; } | |
| .span-37 { width: 122.488em!important; } .append-37 { padding-right: 123.321em!important; } .prepend-37 { padding-left: 123.321em!important; } .pull-37 { margin-left:-123.321em!important; } .push-37 { margin-left:123.321em!important;margin-right:-123.321em!important; } | |
| .span-38 { width: 125.821em!important; } .append-38 { padding-right: 126.654em!important; } .prepend-38 { padding-left: 126.654em!important; } .pull-38 { margin-left:-126.654em!important; } .push-38 { margin-left:126.654em!important;margin-right:-126.654em!important; } | |
| .span-39 { width: 129.154em!important; } .append-39 { padding-right: 129.987em!important; } .prepend-39 { padding-left: 129.987em!important; } .pull-39 { margin-left:-129.987em!important; } .push-39 { margin-left:129.987em!important;margin-right:-129.987em!important; } | |
| .span-40 { width: 132.487em!important; } .append-40 { padding-right: 133.32em!important; } .prepend-40 { padding-left: 133.32em!important; } .pull-40 { margin-left:-133.32em!important; } .push-40 { margin-left:133.32em!important;margin-right:-133.32em!important; } | |
| .span-41 { width: 135.82em!important; } .append-41 { padding-right: 136.653em!important; } .prepend-41 { padding-left: 136.653em!important; } .pull-41 { margin-left:-136.653em!important; } .push-41 { margin-left:136.653em!important;margin-right:-136.653em!important; } | |
| .span-42 { width: 139.153em!important; } .append-42 { padding-right: 139.986em!important; } .prepend-42 { padding-left: 139.986em!important; } .pull-42 { margin-left:-139.986em!important; } .push-42 { margin-left:139.986em!important;margin-right:-139.986em!important; } | |
| .span-43 { width: 142.486em!important; } .append-43 { padding-right: 143.319em!important; } .prepend-43 { padding-left: 143.319em!important; } .pull-43 { margin-left:-143.319em!important; } .push-43 { margin-left:143.319em!important;margin-right:-143.319em!important; } | |
| .span-44 { width: 145.819em!important; } .append-44 { padding-right: 146.652em!important; } .prepend-44 { padding-left: 146.652em!important; } .pull-44 { margin-left:-146.652em!important; } .push-44 { margin-left:146.652em!important;margin-right:-146.652em!important; } | |
| .span-45 { width: 149.152em!important; } .append-45 { padding-right: 149.985em!important; } .prepend-45 { padding-left: 149.985em!important; } .pull-45 { margin-left:-149.985em!important; } .push-45 { margin-left:149.985em!important;margin-right:-149.985em!important; } | |
| .span-46 { width: 152.485em!important; } .append-46 { padding-right: 153.318em!important; } .prepend-46 { padding-left: 153.318em!important; } .pull-46 { margin-left:-153.318em!important; } .push-46 { margin-left:153.318em!important;margin-right:-153.318em!important; } | |
| .span-47 { width: 155.818em!important; } .append-47 { padding-right: 156.651em!important; } .prepend-47 { padding-left: 156.651em!important; } .pull-47 { margin-left:-156.651em!important; } .push-47 { margin-left:156.651em!important;margin-right:-156.651em!important; } | |
| .span-48 { width: 159.151em!important; } .append-48 { padding-right: 159.984em!important; } .prepend-48 { padding-left: 159.984em!important; } .pull-48 { margin-left:-159.984em!important; } .push-48 { margin-left:159.984em!important;margin-right:-159.984em!important; } | |
| .span-49 { width: 162.484em!important; } .append-49 { padding-right: 163.317em!important; } .prepend-49 { padding-left: 163.317em!important; } .pull-49 { margin-left:-163.317em!important; } .push-49 { margin-left:163.317em!important;margin-right:-163.317em!important; } | |
| .span-50 { width: 165.817em!important; } .append-50 { padding-right: 166.65em!important; } .prepend-50 { padding-left: 166.65em!important; } .pull-50 { margin-left:-166.65em!important; } .push-50 { margin-left:166.65em!important;margin-right:-166.65em!important; } | |
| /* Misc classes and elements | |
| -------------------------------------------------------------- */ | |
| /* Use a .box to create a padded box inside a column. */ | |
| .navbox, .box { | |
| padding: .4em; | |
| margin:.5em 0; | |
| border-width:.1em; | |
| border-style:solid; | |
| -moz-border-radius: .5em; | |
| -webkit-border-radius: .5em; | |
| border-radius: .5em; | |
| list-style:none; | |
| clear:both; | |
| } | |
| .box.last { clear:none; } | |
| .navbox a {display:block; width:auto;} | |
| .fatbox{ | |
| display:block; | |
| padding: 1.665em; | |
| border-width:0; | |
| list-style:none; | |
| } | |
| .round-all | |
| { | |
| -webkit-border-radius: .5em; | |
| -moz-border-radius: .5em; | |
| border-radius: .5em; | |
| } | |
| .round-top | |
| { | |
| -webkit-border-top-right-radius:.5em; | |
| -webkit-border-top-left-radius: .5em; | |
| -webkit-border-bottom-right-radius: 0; | |
| -webkit-border-bottom-left-radius: 0; | |
| -moz-border-radius: .5em .5em 0 0; | |
| border-radius: .5em .5em 0 0; | |
| } | |
| .round-right | |
| { | |
| -webkit-border-top-right-radius: .5em; | |
| -webkit-border-top-left-radius: 0; | |
| -webkit-border-bottom-right-radius: .5em; | |
| -webkit-border-bottom-left-radius: 0; | |
| -moz-border-radius:0 .5em .5em 0; | |
| border-radius:0 .5em .5em 0; | |
| } | |
| .round-bottom | |
| { | |
| -webkit-border-top-right-radius: 0; | |
| -webkit-border-top-left-radius: 0; | |
| -webkit-border-bottom-right-radius: .5em; | |
| -webkit-border-bottom-left-radius: .5em; | |
| -moz-border-radius:0 0 .5em .5em; | |
| border-radius: 0 0 .5em .5em; | |
| } | |
| .round-left | |
| { | |
| -webkit-border-top-right-radius: 0; | |
| -webkit-border-top-left-radius: .5em; | |
| -webkit-border-bottom-right-radius: 0; | |
| -webkit-border-bottom-left-radius: .5em; | |
| -moz-border-radius: .5em 0 0 .5em; | |
| border-radius: .5em 0 0 .5em; | |
| } | |
| .vr { | |
| padding-right: .2em; | |
| margin-right: .533em; | |
| border-right: .1em solid #ddd; | |
| } | |
| .hr { | |
| border-bottom: .1em solid #ddd; | |
| } | |
| /* Use this to create a horizontal ruler across a column. */ | |
| hr { | |
| background: #ddd; | |
| color: #ddd; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| height: .1em; | |
| margin: 0 0 1.45em; | |
| border: none; | |
| } | |
| hr.space { | |
| background: #fff; | |
| color: #fff; | |
| } | |
| /* Clearing floats without extra markup | |
| Based on How To Clear Floats Without Structural Markup by PiE | |
| [http://www.positioniseverything.net/easyclearing.html] */ | |
| .clearfix:after, .container:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| .clearfix, .container {display: inline-block;} | |
| * html .clearfix, | |
| * html .container {height: 1%;} | |
| .clearfix, .container {display: block;} | |
| /* Regular clearing | |
| apply to column that should drop below previous ones. */ | |
| .clear { clear:both; } |
This file contains 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
| .container.fluid .span-1, | |
| .container.fluid .span-2, | |
| .container.fluid .span-3, | |
| .container.fluid .span-4, | |
| .container.fluid .span-6, | |
| .container.fluid .span-8, | |
| .container.fluid .span-12, | |
| .container.fluid .span-16, | |
| .container.fluid .span-16, | |
| .container.fluid .span-18, | |
| .container.fluid .span-24 {margin-right:1%; display:block; float:left;} | |
| .container.fluid .span-1 {width:3.208%;}/* 1/24 */ | |
| .container.fluid .span-2 {width:7.41%;}/* 1/12 */ | |
| .container.fluid .span-3 {width:11.625%;}/* 1/8 */ | |
| .container.fluid .span-4 {width:15.833%;}/* 1/6 */ | |
| .container.fluid .span-5 {width:19.2%;} | |
| .container.fluid .span-6 {width:24.24%;}/* 1/4 25% */ | |
| .container.fluid .span-7 {width:28.458%;} | |
| .container.fluid .span-8 {width:32.66%;}/* 1/3 33% */ | |
| .container.fluid .span-9 {width:36.875%;}/* 3/8 */ | |
| .container.fluid .span-10 {width:41.083%;} | |
| .container.fluid .span-11 {width:45.291%;} | |
| .container.fluid .span-12 {width:49.49%;}/* 1/2 50% */ | |
| .container.fluid .span-13 {width:53.708%;} | |
| .container.fluid .span-14 {width:58.916%;}/* 7/12 */ | |
| .container.fluid .span-15 {width:62.125%;} | |
| .container.fluid .span-16 {width:66.333%;}/* 2/3 */ | |
| .container.fluid .span-17 {width:70.541%;} | |
| .container.fluid .span-18 {width:74.75%;}/* 3/4 */ | |
| .container.fluid .span-19 {width:78.958%} | |
| .container.fluid .span-20 {width:83.166%;}/* 5/6 */ | |
| .container.fluid .span-21 {width:87.375%;} | |
| .container.fluid .span-22 {width:91.583%;} | |
| .container.fluid .span-23 {width:95.791%;} | |
| .container.fluid .span-24 {width:99%; clear:both;} | |
| .container.fluid .last {margin-right:0; } | |
| .container.fluid .suffix-1 {padding-right:4.125%;} | |
| .container.fluid .suffix-2 {padding-right:8.25%;} | |
| .container.fluid .suffix-3 {padding-right:12.375%;} | |
| .container.fluid .suffix-4 {padding-right:17.5%;} | |
| .container.fluid .suffix-6 {padding-right:25.75%;} | |
| .container.fluid .suffix-8 {padding-right:34%;} | |
| .container.fluid .suffix-12 {padding-right:50.49%;} | |
| .container.fluid .suffix-16 {padding-right:67%;} | |
| .container.fluid .suffix-18 {padding-right:75.75%%;} | |
| .container.fluid .prefix-1 {padding-left:4.125%;} | |
| .container.fluid .prefix-2 {padding-left:8.25%;} | |
| .container.fluid .prefix-3 {padding-left:13.375%;} | |
| .container.fluid .prefix-4 {padding-left:17.5%;}/* 1/6 */ | |
| .container.fluid .prefix-6 {padding-left:25.75%;} | |
| .container.fluid .prefix-8 {padding-left:34%;} | |
| .container.fluid .prefix-12 {padding-left:50.49%;} | |
| .container.fluid .prefix-16 {padding-left:67%;} | |
| .container.fluid .prefix-18 {padding-left:75.75%;} | |
| .container.fluid .prefix-22 {padding-left:92.75%;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment