Filters.

<div class="thegrid">
    <div class="cell" data-color="blue" data-width="1" data-height="4"><div data-text="1"></div></div>
    <div class="cell" data-color="green" data-width="1" data-height="1"><div data-text="2"></div></div>
    <div class="cell" data-color="green" data-width="2" data-height="1"><div data-text="3"></div></div>
    <div class="cell" data-color="pink" data-width="2" data-height="1"><div data-text="4"></div></div>
    <div class="cell" data-color="pink" data-width="2" data-height="1"><div data-text="5"></div></div>
    <div class="cell" data-color="blue" data-width="2" data-height="1"><div data-text="6"></div></div>
    <div class="cell" data-color="green" data-width="3" data-height="1"><div data-text="7"></div></div>
    <div class="cell" data-color="green" data-width="1" data-height="3"><div data-text="8"></div></div>
    <div class="cell" data-color="blue" data-width="2" data-height="1"><div data-text="9"></div></div>
    <div class="cell" data-color="blue" data-width="1" data-height="2"><div data-text="10"></div></div>
    <div class="cell" data-color="pink" data-width="1" data-height="1"><div data-text="11"></div></div>
    <div class="cell" data-color="pink" data-width="1" data-height="2"><div data-text="12"></div></div>
    <div class="cell" data-color="pink" data-width="1" data-height="2"><div data-text="13"></div></div>
    <div class="cell" data-color="green" data-width="3" data-height="1"><div data-text="14"></div></div>
    <div class="cell" data-color="green" data-width="1" data-height="2"><div data-text="15"></div></div>
    <div class="cell" data-color="blue" data-width="1" data-height="2"><div data-text="16"></div></div>
    <div class="cell" data-color="green" data-width="1" data-height="1"><div data-text="17"></div></div>
    <div class="cell" data-color="green" data-width="1" data-height="1"><div data-text="18"></div></div>
    <div class="cell" data-color="blue" data-width="4" data-height="1"><div data-text="19"></div></div>
    <div class="cell" data-color="green" data-width="2" data-height="1"><div data-text="20"></div></div>
</div>

.filter {
    border: 1px solid #ccc;
    color: #fff;
    text-align: center;
    line-height: 2;
    font-size: 110%;
    border-radius: 20px;
    padding: 0 15px 0 20px;
    text-indent: -.4em;
    outline: none;
    cursor: pointer;
    text-shadow: 0 0 2px rgba(0,0,0,.2);
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.filter:before {
    font-family: "the-grid" !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\63";
    font-size: 130%;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 2px;
    opacity: 0;
    filter: alpha(opacity=0);
}
:checked + .filter:before {
    opacity: 1;
    filter: alpha(opacity=100);
}
.thegrid .cell > div {
    border: 1px solid;
}
.thegrid .cell[data-color="blue"] > div,
.filter.blue {
    border-color: #4a8de0;
    background-image: radial-gradient(circle at top right, #bed3fd, #4a8de0);
}
.thegrid .cell[data-color="pink"] > div,
.filter.pink {
    border-color: #ff54a3;
    background-image: radial-gradient(circle at top right, #ffb1cb, #ff54a3);
}
.thegrid .cell[data-color="green"] > div,
.filter.green {
    border-color: #69bf46;
    background-image: radial-gradient(circle at top right, #c5ff99, #69bf46);
}

// When DOM is ready.
var activeFilters = {blue: true, green: true, pink: true},
    gridElement = $('.thegrid');

gridElement.grid(
{
    cellsPerRow: 5
});

$('input.toggle').on('change', function()
{
    var isActive = $(this).is(':checked'),
        color = $(this).data('color'),
        filteredCells = [];

    activeFilters[color] = isActive;

    for (var color in activeFilters) if (activeFilters[color])
    {
        filteredCells.push('.cell[data-color="' + color + '"]');
    }

    gridElement
        .grid('filter', $(filteredCells.join(',')), false, true)
        .grid('redraw');
})

// Alternatively you can do the same like this:
/*
var g1 = new thegrid(
{
    cellsPerRow: 5
}),
activeFilters = {blue: true, green: true, pink: true};

$('input.toggle').on('change', function()
{
    var isActive = $(this).is(':checked'),
        color = $(this).data('color'),
        filteredCells = [];

    activeFilters[color] = isActive;

    for (var color in activeFilters) if (activeFilters[color])
    {
        filteredCells.push('.cell[data-color="' + color + '"]');
    }

    g1.filter($(filteredCells.join(',')), false, true)
    g1.redraw();
})
*/