RadPageLayout Grid Types

The RadPageLayout control has three available types of Grid Based Layout that specify the behavior of the control:

• Fixed - there are five predefined width values for the grid columns and the container responds to viewport size changes by setting a grid column width that corresponds to the current size of the viewport. More information about these size ranges can be found in the article Viewport Breakpoints.

• Fluid - fluidly reacts to changes in the viewport size by setting the size of the grid rows so that it fits the available space.

• Static - the grid is static and does not respond to changes in the size of the viewport.

Example 1: Configuring Grid Based Layout in a RadPageLayout control.

<telerik:RadPageLayout ID="RadPageLayout1" runat="server" GridType="Fluid" ShowGrid="true">
    <Rows>
        <telerik:LayoutRow>
            <Content>
                <div class="card">Header</div>
            </Content>
        </telerik:LayoutRow>
        <telerik:LayoutRow>
            <Columns>
                <telerik:LayoutColumn Span="3">
                    <div class="card" style="height: 300px">Sidebar</div>
                </telerik:LayoutColumn>
                <telerik:LayoutColumn Span="9">
                    <div class="card" style="height: 300px">Main content</div>
                </telerik:LayoutColumn>
            </Columns>
        </telerik:LayoutRow>
        <telerik:LayoutRow>
            <Content>
                <div class="card">Footer</div>
            </Content>
        </telerik:LayoutRow>
    </Rows>
</telerik:RadPageLayout>

See Also

• RadPageLayout Grid Based Layout

• RadPageLayout Viewport Breakpoints