Grid Sizing

Updated on Aug 28, 2026

This feature attempts to address the need for a Compact Grid, which renders more items by utilizing the available space, mainly through setting smaller padding in its cells.

You can increase or decrease the size of the Grid by setting the Size attribute to a member of the Telerik.Blazor.ThemeConstants.Grid.Size.Size class:

Class members	Manual declarations
Small	sm
Medium default value	md

Changing the Size property affects different building blocks of the component (tables, buttons, inputs, dropdowns, and others).

The built-in Size modes

Loading ...

Notes

1. The Size option does not affect elements displayed inside a Popup (such as Filter Menu, Column Menu, etc.). By design, all Popup elements are rendered on root level, so they are not technically inside the Grid. Thus, the Size option cannot propagate to them. To change the Size options of the elements inside Popups, you can use a template(where available), so you can override the built-in rendering. You can then add custom elements and explicitly specify their Size.

2. The Size option does not propagate to components rendered inside templates (this includes elements in GridToolBar, CommandColumn, etc.). To change the size of the elements in those components you have to set it explicitly.

Set GridCommandButton Size option

RAZOR

<TelerikGrid Size="@ThemeConstants.Grid.Size.Small">
    <GridToolBarTemplate>
        <GridCommandButton Size="@ThemeConstants.Button.Size.Small">Small Button</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridCommandColumn>
            <GridCommandButton Size="@ThemeConstants.Button.Size.Small">Small Button</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

See Also

• Grid Overview
• Live Demo: Grid Sizing
• Blazor Grid