Skip to content

Instantly share code, notes, and snippets.

@keeyip keeyip/grid.css
Last active Dec 21, 2015

Embed
What would you like to do?
Grid Layout
.container {
position:relative;
background:black;
outline: solid 4px red;
display:inline-block;
vertical-align:top;
margin: 20px;
}
.cell {
text-align:center;
font-family:verdana;
font-size:24px;
background: hsla(0,0%,90%,0.8);
border:solid 1px blue;
}
<!doctype html>
<html>
<body>
<link href="reset.css"/>
<link href="grid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='main.js'></script>
</body>
</html>
$(function() {
function layout(items) {
var map = {}
var rightEdge = 8
var $cells = $()
var x = 0, y = 0
var maxY = y
var right
var cell
for (var i=0, n=items.length; i < n; i++) {
cell = items[i]
var width = cell[0], height = cell[1]
var hit;
do {
hit = false;
right = x + width
if (right > rightEdge) {
x = 0
y++
right = x + width
}
for (var x1 = x; x1 < right; x1++) {
if (map[x1 +','+y]) {
hit = true;
x = x1 + 1;
break;
}
}
} while(hit);
// Try to move upwards if there are empty vertical cells
var backtrackhit = false;
right = x + width;
for (; y > 0 && !map[x+','+(y-1)]; y--) {
backtrackhit = false;
for (var x1 = x; x1 < right; x1++) {
if (map[x1 +','+(y-1)]) {
backtrackhit = true;
break;
}
}
if (backtrackhit)
break;
}
var $cell = $('<div class="cell">')
.css({
position: 'absolute',
top: y*50,
left: x*50,
width: width*50,
height: height*50,
'line-height': height*50 + 'px'
})
.text(cell[2] || '--')
.data('x',x)
$cells = $cells.add($cell)
for (var w = width-1; w >= 0; w--) {
for (var h = height-1; h >= 0; h--) {
map[(x+w)+','+(y+h)] = true
}
}
maxY = Math.max(maxY,y+height)
x = right
}
$('<div class="container">')
.css({
width: rightEdge*50,
height: maxY*50
})
.append($cells).appendTo('body')
}
layout([
[1,1,'a'],[2,2,'b'],[2,1,'c'],[3,2,'d'],[2,2,'e'],[4,3,'f'],
[1,1,'a'],[2,2,'b'],[1,3,'c'],[3,2,'d'],[2,2,'e'],[4,3,'f']
])
layout([
[1,1,'a'],[3,2,'b'],[3,1,'c'],[1,2,'d'],[1,2,'e'],[4,3,'f'],
[1,1,'a'],[2,2,'b'],[1,3,'c'],[3,2,'d'],[2,2,'e'],[4,3,'f']
])
layout([
[1,4,'previous'],[6,4,'b'],[1,4,'next'],
[1,1,'close'],[1,1,'facebook'],[1,1,'github'],[5,1,''],
[1,1,'a'],[2,2,'b'],[1,3,'c'],[3,2,'d'],[2,2,'e'],[4,3,'f']
])
})
* {
box-sizing: border-box;
}
body {
background:hsl(0,0%,50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.