Available in the OSS Version

Layout Manager - Grid Layout with Custom Size

This sample demonstrates the layout manager control’s grid layout having specific width and height for each column.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The control allows you to position items arbitrarily in a grid with a predefined size. Also the layout manager gives you an opportunity to set specific width/height for each column by px, percent or * (fills the remaining space).

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ignite UI for jQuery Layout Manager - grid layout with custom size</title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.layout.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Modernizr/jQuery/jQuery UI -->
    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <style>
        #layout {
            position: relative;
        }

        .item {
            background-color: #F5F5F5;
            border: 1px solid #BDBDBD;
        }

        .item-inner-container {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

        .first-cat {
            background-image: url(/images/samples/layout-manager/koen-eijkelenboom-353679.jpg);
        }

        .second-cat {
            background-image: url(/images/samples/layout-manager/mikhail-vasilyev-253977.jpg);
        }

        .third-cat {
            background-image: url(/images/samples/layout-manager/cel-lisboa-73965.jpg);
        }

        .fourth-cat {
            background-image: url(/images/samples/layout-manager/anthony-de-kroon-377702.jpg);
        }
    </style>
</head>
<body>
    <div id="layout-wrapper">
        <div id="layout">
            <div class="item">
                <div class="item-inner-container first-cat">
                </div>
            </div>
            <div class="item">
                <div class="item-inner-container second-cat">
                </div>
            </div>
            <div class="item">
                <div class="item-inner-container third-cat">
                </div>
            </div>
            <div class="item yellow">
                <div class="item-inner-container fourth-cat">
                </div>
            </div>
        </div>
    </div>  
    <script type="text/javascript">
        $(function () {
            $('#layout').igLayoutManager({
                layoutMode: "grid",
                width: "100%",
                height: "500px",
                gridLayout: {
                    columnHeight: ["20%", "200px", "*"],
                    columnWidth: ["20%", "*", "*"],
                    marginLeft: 5,
                    marginTop: 5
                },
                items: [
                    {
                        rowSpan: 2,
                        colSpan: 2,
                        colIndex: 0,
                        rowIndex: 0
                    },
                    {
                        rowSpan: 1,
                        colSpan: 1,
                        rowIndex: 0,
                        colIndex: 2
                    },
                    {
                        rowSpan: 1,
                        colSpan: 1,
                        rowIndex: 1,
                        colIndex: 2
                    },
                    {
                        rowSpan: 1,
                        colSpan: 3,
                        colIndex: 0,
                        rowIndex: 2
                    }
                ]
            });
        });
    </script>
</body>
</html>