Dynamic cell height.

This example has 20 cells with a given aspect ratio. The height of each cell is recalculated every time its width changes by resizing the window.
As this option is far less performant it is best to enable the throttling option to skip some resizing steps.

Note: even with dynamic height, the same height will be applied to every cell with the data-height multiplier.
This allows the grid cells to always be aligned vertically. 

<div class="thegrid">
    <div class="cell" data-width="1" data-height="4"><div data-text="1"></div></div>
    <div class="cell" data-width="1" data-height="1"><div data-text="2"></div></div>
    <div class="cell" data-width="2" data-height="1"><div data-text="3"></div></div>
    <div class="cell" data-width="2" data-height="1"><div data-text="4"></div></div>
    <div class="cell" data-width="2" data-height="1"><div data-text="5"></div></div>
    <div class="cell" data-width="2" data-height="1"><div data-text="6"></div></div>
    <div class="cell" data-width="3" data-height="1"><div data-text="7"></div></div>
    <div class="cell" data-width="1" data-height="3"><div data-text="8"></div></div>
    <div class="cell" data-width="2" data-height="1"><div data-text="9"></div></div>
    <div class="cell" data-width="1" data-height="2"><div data-text="10"></div></div>
    <div class="cell" data-width="1" data-height="1"><div data-text="11"></div></div>
    <div class="cell" data-width="1" data-height="2"><div data-text="12"></div></div>
    <div class="cell" data-width="1" data-height="2"><div data-text="13"></div></div>
    <div class="cell" data-width="3" data-height="1"><div data-text="14"></div></div>
    <div class="cell" data-width="1" data-height="2"><div data-text="15"></div></div>
    <div class="cell" data-width="1" data-height="2"><div data-text="16"></div></div>
    <div class="cell" data-width="1" data-height="1"><div data-text="17"></div></div>
    <div class="cell" data-width="1" data-height="1"><div data-text="18"></div></div>
    <div class="cell" data-width="4" data-height="1"><div data-text="19"></div></div>
    <div class="cell" data-width="2" data-height="1"><div data-text="20"></div></div>
</div>
.thegrid .cell > div {
    border: 1px solid #e9f;
    background-image: radial-gradient(circle at top right, #e9f, #fdf);

    /* To center text vertically. */
    display: flex;
    align-items: center;
}
.cell div:after {
    content: attr(data-text);
    display: block;
    text-align: center;
    width: 100%;
    color: rgba(255,255,255, .5);
    font-size: 200%;
    font-size: 4vw;
}
// When DOM is ready.

var ratio = 16 / 9;// Any ratio you want to maintain on the grid cells.

$('.thegrid').grid(
{
    cellsPerRow: 5,

    // Optionnally, to lighten the resize event job.
    // throttling: 500,

    // The grid instance is passed as a parameter to the function so you can access public variables.
    cellHeight: function(g){return g.gridWidth / (g.options.cellsPerRow * ratio)}
});