GridLayout Overview

The Blazor GridLayout component allows you to arrange the contents of the component in rows and columns in a grid structure.

Telerik UI for Blazor Ninja image

The Grid Layout component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating GridLayout

  1. Add the <TelerikGridLayout> tag to your razor page.
  2. To define columns in the GridLayout, add one or more <GridLayoutColumn> tags to the <GridLayoutColumns> collection.
  3. To define rows in the GridLayout add one or more <GridLayoutRow> tags to the <GridLayoutRows> collection.
  4. Define one or more <GridLayoutItem> tags to the <GridLayoutItems> collection.

A basic configuration of the Telerik GridLayout

@* Split the items in the GridLayout in three columns and two rows. *@

<TelerikGridLayout>
    <GridLayoutColumns>
        <GridLayoutColumn Width="200px"></GridLayoutColumn>
        <GridLayoutColumn Width="200px"></GridLayoutColumn>
        <GridLayoutColumn Width="200px"></GridLayoutColumn>
    </GridLayoutColumns>
    <GridLayoutRows>
        <GridLayoutRow Height="50px"></GridLayoutRow>
    </GridLayoutRows>
    <GridLayoutItems>
        <GridLayoutItem>
            <div style="border: 1px gray solid;">
                item 1
            </div>
        </GridLayoutItem>
        <GridLayoutItem>
            <div style="border: 1px gray solid;">
                item 2
            </div>
        </GridLayoutItem>
        <GridLayoutItem>
            <div style="border: 1px gray solid;">
                item 3
            </div>
        </GridLayoutItem>
        <GridLayoutItem>
            <div style="border: 1px gray solid;">
                item 4
            </div>
        </GridLayoutItem>
        <GridLayoutItem>
            <div style="border: 1px gray solid;">
                item 5
            </div>
        </GridLayoutItem>
    </GridLayoutItems>
</TelerikGridLayout>

Rows

Defining a new GridLayoutRow tag to the GridLayout renders a new row in the component. You can set their heights by using the Height parameter exposed on the <GridLayoutRow> tag.

Columns

Defining a new GridLayoutColumn tag to the GridLayout renders a new column in the component. You can set their widths by using the Width parameter exposed on the <GridLayoutColumn>.

Items

The GridLayout Item defines the content of the TelerikGridLayout. See the Items article for more information...

GridLayout Parameters

Parameter Type and Default value Description
Class string Adds a custom CSS class to the <div class="k-grid-layout"> element.
Width string Controls the width of the GridLayout.
ColumnSpacing string Controls the space between the columns in the GridLayout.
RowSpacing string Controls the space between the rows in the GridLayout.
HorizontalAlign GridLayoutHorizontalAlign enum
(Stretch)
Controls the alignment of the inner items in the GridLayout column based on the X axis.
VerticalAlign GridLayoutVerticalAlign enum
(Stretch)
Controls the alignment of the inner items in the GridLayout column based on the Y axis.

Next Steps

See Also

In this article