New to Kendo UI for jQuery? Start a free 30-day trial

Grid.gap

configuration

An object holding values that determine the spacing between the skeleton items horizontally and vertically.

grid.gap

Object

<div id="skeleton"></div>
<script>
$("#skeleton").kendoSkeletonContainer({
    width: 300,
    height: 250,
    grid: {
        columns: 4,
        rows: 3,
        gap: {
            columns: 8,
            rows: 12
        },
        items: [
            {
                colStart: 1,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            },
            {
                colStart: 2,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            }
        ]
    },
    animation: "pulse"
});
</script>

grid.gap.columns

Number

A value in pixels determining the space between horizontal spacing between the items.

<div id="skeleton"></div>
<script>
$("#skeleton").kendoSkeletonContainer({
    width: 400,
    height: 400,
    grid: {
        columns: 5,
        rows: 5,
        items: [
            {
                colStart: 1,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            },
            {
                colStart: 2,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            }
        ],
        gap: {
            columns: 25,
            rows: 25
        }
    }
});
</script>

grid.gap.rows

Number

A value in pixels determining the space between vertical spacing between the items.

<div id="skeleton"></div>
<script>
$("#skeleton").kendoSkeletonContainer({
    width: 400,
    height: 400,
    grid: {
        columns: 5,
        rows: 5,
        items: [
            {
                colStart: 1,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            },
            {
                colStart: 2,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "circle"
            }
        ],
        gap: {
            columns: 25,
            rows: 25
        }
    }
});
</script>