gridster

by Cindy Cullen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="3" data-sizey="1">1</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">2</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">3</li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">4</li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2">5</li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">6</li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1">7</li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1">8</li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">9</li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1">10</li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1">11</li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2">12</li>
    </ul>
</div>

JavaScript

$(function(){ //DOM Ready

    var gridster = $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140],
        max_size_x: 3
    }).data('gridster');
    gridster.add_widget('<li>space</li>', 4, 1);

});