Skip to content

Instantly share code, notes, and snippets.

@rudev

rudev/gist:1992277

Created March 7, 2012 09:46
Show Gist options
  • Save rudev/1992277 to your computer and use it in GitHub Desktop.
Save rudev/1992277 to your computer and use it in GitHub Desktop.
Download ZIP
CSS: Simple Modern CSS Grid
Raw
gistfile1
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style>
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
div[class^="grid_"] {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
.grid_1 {
width: 6.333333333333332%;
}
.grid_2 {
width: 14.666666666666666%;
}
.grid_3 {
width: 23%;
}
.grid_4 {
width: 31.33333333333333%;
}
.grid_5 {
width: 39.666666666666664%;
}
.grid_6 {
width: 48%;
}
.grid_7 {
width: 56.333333333333336%;
}
.grid_8 {
width: 64.66666666666666%;
}
.grid_9 {
width: 73%;
}
.grid_10 {
width: 81.33333333333333%;
}
.grid_11 {
width: 89.66666666666666%;
}
.grid_12 {
width: 98%;
}
@media screen and (max-width: 480px) {
.container { width: 100%; margin: 0; padding: 0; margin: 0; }
div[class^="grid_"] {
float: none;
display: block;
width: 100%;
margin: 0;
}
}
/* Ignore. Just setting up grid demo */
.container { padding-top: 1px; }
div[class^='grid_'] {
height: 50px; margin-bottom: 20px;
outline: 1px solid black;
}
@media screen and (max-width:480px) {
div[class^='grid_'] {
outline: none;
background: #e3e3e3;
}
}
/* End Ignore */
</style>
</head>
<body>
<div class="container">
<div class="grid_2">2</div>
<div class="grid_2">2</div>
<div class="grid_2">2</div>
<div class="grid_2">2</div>
<div class="grid_2">2</div>
<div class="grid_2">2</div>
<div class="grid_3">3</div>
<div class="grid_3">3</div>
<div class="grid_3">3</div>
<div class="grid_3">3</div>
<div class="grid_4">4</div>
<div class="grid_4">4</div>
<div class="grid_4">4</div>
<div class="grid_5">5</div>
<div class="grid_5">5</div>
<div class="grid_2">2</div>
<div class="grid_6">6</div>
<div class="grid_6">6</div>
<div class="grid_7">7</div>
<div class="grid_5">5</div>
<div class="grid_8">8</div>
<div class="grid_4">4</div>
<div class="grid_9">9</div>
<div class="grid_3">3</div>
<div class="grid_10">10</div>
<div class="grid_2">2</div>
<div class="grid_11">11</div>
<div class="grid_1">1</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment