Skip to content

Instantly share code, notes, and snippets.

@widyakumara
Created July 23, 2014 12:08
Show Gist options
  • Save widyakumara/e09de067a7592a5a7b0a to your computer and use it in GitHub Desktop.
Save widyakumara/e09de067a7592a5a7b0a to your computer and use it in GitHub Desktop.
ungrid by @chrisnager: the simplest responsive css grid http://chrisnager.github.io/ungrid/
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name='viewport' content='width=device-width, initial-scale=1'/>
<style type='text/css'>
.row {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
margin-bottom: -1px;
}
.col {
display: table-cell;
border-collapse: collapses;
}
.a, .b {
text-align: center;
border: 1px solid #333;
padding: 20px;
}
.a { background-color: #369; }
.b { background-color: #963; }
</style>
</head>
<body>
<?php
for($i = 1; $i <= 20; $i++) {
echo "<div class='row'>";
for($j = 1; $j <= $i; $j++) {
$x = $j % 2 == 0 ? 'a' : 'b';
echo "<div class='col $x'>$j</div>";
}
echo "</div>";
}
?>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment