Responsive Tiles

For a couple of projects, I wanted to create tiles that automatically resized themselves based on the screen size, or space available within the page. If there is enough room, I wanted the system to automatically insert another tile to the row.

The javascript/jquery:

//Resizes tiles to completely fill the width of a container div (.tile-container).  

var tileMinWidth = new Array();

function resizeTiles() {

    $('.tile-container').each(function (i, obj) {

        if (!tileMinWidth[i]) {
            tileMinWidth[i] = $(obj).find('.tile').width();
        }

        var containerWidth = $(obj).width();
        var rowElements     = Math.floor(containerWidth / tileMinWidth[i]);
        var tileWidth       = 100 / rowElements;

        $(obj).find('.tile').css({ 'width': tileWidth + '%' });

        //If it's the end of the row, clear it:
        $(obj).find(\".tile:nth-child(" + (rowElements + 1) + ")").css("clear", "left");

    });

}

$(window).resize(resizeTiles);
$(document).ready(resizeTiles);

2/23/14 – Updated this so there can be different groupings of tiles on the same page, with different minimum widths per tile, and different widths that they are allowed to spill into. I also set it to \’clear\’ the divs if it’s the beginning of a new row, to get rid of weird div floating issues if the tiles aren\’t of all the same height.