keeyip/grid.css

## grid.css
.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;
}

## index.html
<!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>

## main.js
$(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']
    ])
})

## reset.css
* {
    box-sizing: border-box;
}
body {
    background:hsl(0,0%,50%);
}
	.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']
	])
	})