Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
80 lines (73 sloc) 2.25 KB
<html>
<head>
<script src='jquery.js'></script>
<script src='grid.js'></script>
<style>
body { margin:0; padding:0; }
.grid { position:relative; display:block; background: #f0f0f0;}
.vertical { min-width:768px; max-width:1080px; }
.horizontal { min-width:1024px; max-width:1920px; }
.cell { background:#333; display:block; position:absolute; overflow:none; }
</style>
</head>
<body>
<div class='grid horizontal'>
<!-- row 1 -->
<div class='cell' data-x="0" data-y="0" style='background:#f6f'>
<p>hello world</p>
</div>
<div class='cell' data-x="1" data-y="0" style='background:#6ff'>
<p>hello world</p>
</div>
<div class='cell' data-x="2" data-y="0">
<div class='content'>
<p>hello world</p>
</div>
</div>
<div class='cell' data-x="3" data-y="0" style='background:#9f9'>
<p>hello world</p>
</div>
<div class='cell' data-x="4" data-y="0" style='background:#ff9'>
<p>hello world</p>
</div>
<!-- row 2 -->
<div class='cell' data-x="0" data-y="1" data-w="2" data-h="1" style='background:#398'>
<p>wide hello world</p>
</div>
<div class='cell' data-x="2" data-y="1" data-w="2" data-h="1" style='background:#f69'>
<p>wide hello world</p>
</div>
<div class='cell' data-x="4" data-y="1" style='background:#ff0'>
<p>hello world</p>
</div>
<!-- row 3 -->
<div class='cell' data-x="0" data-y="2" data-w="2" data-h="2" style='background:#333'>
<p>hello world</p>
</div>
<div class='cell' data-x="2" data-y="2">
<p>hello world</p>
</div>
<div class='cell' data-x="3" data-y="2" style='background:#9f9'>
<p>hello world</p>
</div>
<div class='cell' data-x="4" data-y="2" style='background:#ff9'>
<p>hello world</p>
</div>
<!-- row 4 -->
<div class='cell' data-x="2" data-y="3" style='background:#6f8'>
<p>hello world</p>
</div>
<div class='cell' data-x="3" data-y="3" style='background:#fa3'>
<p>hello world</p>
</div>
<div class='cell' data-x="4" data-y="3" style='background:#f99'>
<p>hello world</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(window).on('resize', resize).trigger('resize');
})
</script>
</html>