A CodePen by Tim Wood.

index.html

<div id="grid"></div>

script.js

function Block () {
    this.w = Math.round(Math.random() * 3) || 1;
    this.h = Math.round(Math.random() * 3) || 1;
    this.dom = $('<div>').css({
        width : this.w * 10 - 2,
        height : this.h * 10 - 2
    });
    $('#grid').append(this.dom);
}

Block.prototype = {
    setPosition : function (x, y) {
        this.dom.css({
            top : y * 10,
            left : x * 10
        });
    }
}


function Grid () {
    this.blocks = [];
    this.grid = [];
}

Grid.prototype = {
    columns : 40,

    add : function (block) {
        this.blocks.push(block);
        this.findPlace(block);
    },

    clear : function () {
        var x, y;
        for (y = 0; y < this.grid.length; y++) {
            for (x = 0; x < this.grid[y].length; x++) {
                this.grid[y][x] = false;
            }
        }
        this.firstEmpty = 0;
    },

    firstEmpty : 0,
    findPlace : function (block) {
        var x, y,
            maxX = this.columns - block.w,
            maxY = this.grid.length + block.h;

        for (y = this.firstEmpty; y < maxY; y++) {
            for (x = 0; x <= maxX; x++) {
                if (this.place(block, x, y)) {
                    return;
                }
            }
        }
    },

    place : function (block, x, y) {
        var i, j,
            w = block.w,
            h = block.h;
        // check if we can place it
        for (i = 0; i < h; i++) {
            if (!this.grid[y + i]) {
                this.grid[y + i] = [];
            }
            for (j = 0; j < w; j++) {
                if (this.grid[y + i][x + j]) {
                    return false;
                }
            }
        }
        // we can place it, do so now
        for (i = 0; i < h; i++) {
            for (j = 0; j < w; j++) {
                this.grid[y + i][x + j] = true;
            }
        }
        block.setPosition(x, y);
        this.updateFirstEmpty();
        // return true so we know we placed the block
        return true;
    },

    updateFirstEmpty : function () {
        var x, y, hasEmpty;
        for (y = this.firstEmpty; y < this.grid.length; y++) {
            hasEmpty = false;
            for (x = 0; x < this.columns; x++) {
                if (!this.grid[y][x]) {
                    hasEmpty = true;
                }
            }
            if (hasEmpty) {
                this.firstEmpty = y;
                return;
            }
        }
    },

    setColumns : function (columns) {
        var i, block;
        if (columns === this.columns) {
            return;
        }
        $('#grid').css('margin-left', -columns * 5);
        this.columns = columns;
        this.clear();
        for (i = 0; i < this.blocks.length; i++) {
            this.findPlace(this.blocks[i], i);
        }
    }
}

var grid = new Grid();

for (var i = 0; i < 300; i++) {
    grid.add(new Block());
}


// change column count every second

var lastChange = +new Date();
function changeColumns() {
    var now = +new Date();
    var columns; 
    requestAnimationFrame(changeColumns);
    if (now - lastChange > 1000) {
        lastChange = now;
        columns = 10 + Math.round(Math.random() * 60);
        if (grid.columns === columns) {
            columns ++;
        }
        grid.setColumns(columns);
    }
}

changeColumns();

style.scss

@import "compass";
html {
  background: #222;
  padding: 30px;
}

#grid {
  position: absolute;
  left: 50%;
  margin-left: -200px;
  @include transition(all 300ms);
}

#grid div {
  position: absolute;
  background: #feffe7;
  box-sizing: border-box;
  @include transition-property(top, left);
  @include transition-duration(150ms, 300ms);
  @include transition-delay(150ms, 0ms);
}