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

Gap

configuration

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

gap

Object

<div id="tilelayout"></div>
<script>
$("#tilelayout").kendoTileLayout({
    containers: [
        {
            colSpan: 1,
            rowSpan: 1,
            bodyTemplate: "<p>Item 1</p>"
        },
        {
            colSpan: 1,
            rowSpan: 1,
            bodyTemplate: "<p>Item 2</p>"
        },
        {
            colSpan: 1,
            rowSpan: 1,
            bodyTemplate: "<p>Item 3</p>"
        }
    ],
    columns: 3,
    gap: {
        columns: 20,
        rows: 15
    }
});
</script>

gap.columns

Number

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

<script id="first" type="text/x-kendo-template">
<h3>A</h3>
</script>
<script id="second" type="text/x-kendo-template">
    <h3>B</h3>
</script>
<div id="tilelayout"></div>
<script>
$("#tilelayout").kendoTileLayout({
    containers: [
        {
            colSpan: 1,
            rowSpan: 1,
            header: {
                text: "Item one"
            },
            bodyTemplate: kendo.template($("#first").html())
        },
        {
            colSpan: 1,
            rowSpan: 1,
            header: {
                text: "Item two"
            },
            bodyTemplate: kendo.template($("#second").html())
        }
    ],
    gap: {
        columns: 30
    },
    columns: 4
});
</script>

gap.rows

Number

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

<script id="first" type="text/x-kendo-template">
<h3>A</h3>
</script>
<script id="second" type="text/x-kendo-template">
    <h3>B</h3>
</script>
<div id="tilelayout"></div>
<script>
$("#tilelayout").kendoTileLayout({
    containers: [
        {
            colSpan: 1,
            rowSpan: 1,
            header: {
                text: "Item one"
            },
            bodyTemplate: kendo.template($("#first").html())
        },
        {
            colSpan: 1,
            rowSpan: 1,
            header: {
                text: "Item two"
            },
            bodyTemplate: kendo.template($("#second").html())
        }
    ],
    gap: {
        rows: 30
    },
    columns: 4
});
</script>