Skip to content

Instantly share code, notes, and snippets.

@CodeZombie

CodeZombie/hellagrid.html

Last active August 29, 2015 14:19
Show Gist options
  • Save CodeZombie/6893300237b4e8a23ff3 to your computer and use it in GitHub Desktop.
Save CodeZombie/6893300237b4e8a23ff3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hellagrid.html
<!-- this good thing was written by Cazum (zombiearmy.net) in April, 2015. released under the WTFPL.-->
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.grid {
width:85%;
max-width:960px;
margin: 0 auto;
}
.row:after{
clear:both;
content:"";
display:block;
}
.column{
float:left;
margin-right:1%;
}
.column:last-child{
margin-right: 0;
}
.column.one{ width:9.1%; }
.column.two{ width: 19.2%; }
.column.three{ width: 29.3%; }
.column.four{ width: 39.4%; }
.column.five{ width: 49.5%; }
.column.six{ width: 59.6%; }
.column.seven{ width: 69.7%; }
.column.eight{ width: 79.8%; }
.column.nine{ width: 89.9%; }
.column.ten{ width:100%; }
.column.one-offset{margin-left:10.1%;}
.column.two-offset{margin-left:20.2%;}
.column.three-offset{margin-left:30.3%;}
.column.four-offset{margin-left:40.4%;}
.column.five-offset{margin-left:50.5%;}
.column.six-offset{margin-left:60.6%;}
.column.seven-offset{margin-left:70.7%;}
.column.eight-offset{margin-left:80.8.1%;}
.column.nine-offset{margin-left:90.9%;}
@media (max-width: 480px) {
.grid{
width:100%;
padding: 0 20px;
}
.column:not(.non-responsive){
width:100%;
margin-right:0;
margin-left:0;
}
}
/* demo styling. CSS below this line is noncritical */
.row{
background:#eee;
padding: .25rem 0;
margin-bottom:.5rem;
}
.column{
text-align:center;
background:#333;
color:#aaa;
font-size:.25rem;
padding: .35rem 0;
margin-top:.25rem;
margin-bottom:.25rem;
}
</style>
</head>
<body>
<div class="grid">
<h1>hella-neato responsive grid</h1>
<h4>responsive columns:</h4>
<div class="row">
<div class="column five">five</div>
<div class="column five">five</div>
</div>
<h4>column offsets:</h4>
<div class="row">
<div class="column five five-offset">five five-offset</div>
</div>
<div class="row">
<div class="column one">one</div>
<div class="column five four-offset">five four-offset</div>
</div>
<h4>non-responsive columns:</h4>
<div class="row">
<div class="column four non-responsive">four non-responsive.</div>
<div class="column six non-responsive">six non-responsive</div>
</div>
<div class="row">
<div class="column six four-offset non-responsive">six four-offset non-responsive</div>
</div>
<h4>mixed non-responsive columns:</h4>
<div class="row">
<div class="column four non-responsive">four non-responsive</div>
<div class="column two">two responsive</div>
<div class="column four non-responsive">four non-responsive</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment