Get started with jquery.gridster CDN

MIT licensed

JQuery Gridster: Dynamic grid layout library for arranging UI elements with jQuery.

Tags:
  • grids
  • ui
  • templating
  • jquery

Stable version

Copied!

How to start using jquery.gridster CDN


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridster/0.5.2/css/gridster.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
    <link rel="stylesheet" href="styles.css" />
    <style>
        #grid.gridster-item {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 1px;
            padding: 10px;
            text-align: center;
            line-height: 140px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="grid" style="width: 100%; height: 500px;"></div>

    <script>
        $(function() {
            $('#grid').gridster({
                widget_base_dimensions: [200, 200],
                widget_margin: [1, 1],
                autosize: true,
                min_cols: 1,
                max_cols: 5,
                max_rows: 5,
                draggable: {
                    enable: true
                },
                resizable: {
                    enable: false
                },
                swappable: false,
                static_classes: ['no-move']
            }).on('gridster.resizestop', function(event, ui) {
                ui.item.data('size', ui.item.outerSize());
            });

            $('#grid').append('<div id="new-widget" class="gridster-item" style="background-color: #f1c40f;">New Widget</div>');
            $('#grid').find('#new-widget').data('size', [200, 200]).gridsterItem();
            $('#grid').append('<div id="new-widget2" class="gridster-item" style="background-color: #3498db;">New Widget 2</div>');
            $('#grid').find('#new-widget2').data('size', [100, 100]).gridsterItem();
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions