stacking elements together until height reached

So, I am trying to create a windows 8 web application using angularJS. The application is coming along nicely but I have run into a possible issue with my columns and tiles.

http://ift.tt/1C1bs3u

my columns are set to be 100% of the body (which is also set to 100%), the tiles within the columns are stacked 2 by 2 and so far that isn't a problem. The problem arises when the tiles extend past the column height. They just continue past, but I would like them to stack to the right in 2 by 2 formation.

I started to right a directive to find the height of the column and then if the childrens combined height is greater than the column height, to double the size of the column but the problem is that (because I am not using jquery) calculating margins/padding effectively is not feasable (because of window.getComputedStyle() not always returning px).

So I wondered if there was a clever CSS trick that could be used to help.

currently my SCSS looks like this:

#page > .row {
    padding: 0 1rem;
    max-width: initial;
    white-space: nowrap;
    float: left;

    .tile-column {
        width: 266px;
        height: 100%;
        display: inline-block;
        margin-right: 56px;
    }
}

.tile {
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    width: 120px;
    height: 120px;
    margin: 4px;
    float: left;
}

Please help :)