<style>
    .k-tilelayout-item-body {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .my-footer {
        margin-top: auto;
        height: 50px;
        min-height: 50px;
        background: lightgray;
        padding: 8px;
    }

    .main-tile-content {
        padding: 16px;
        overflow: auto;
    }
</style>

<TelerikTileLayout Columns="3"
                   ColumnWidth="200px"
                   RowHeight="150px"
                   Resizable="true"
                   Reorderable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Panel 1">
            <Content>
                <div class="main-tile-content">
                    Regular sized first panel.
                </div>
                <div class="my-footer">this is a footer workaround</div>
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Panel 2">
            <Content>
                <div class="main-tile-content">
                    You can put components in the tiles too. This is a very small tile that has no room for both content and footer so there is an overflow css rule for it.
                </div>
                <div class="my-footer">this is a footer workaround</div>
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Panel 3" RowSpan="3">
            <Content>
                <div class="main-tile-content">
                    This tile is three rows tall.
                </div>
                <div class="my-footer">this is a footer workaround</div>
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Panel 4" RowSpan="2" ColSpan="2">
            <Content>
                <div class="main-tile-content">
                    This tile is two rows tall and two columns wide.
                </div>
                <div class="my-footer">this is a footer workaround</div>
            </Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>