Blazor UI Components - Grid and Stack Layout for Blazor - Responsive Page Layouts (available in v20.2)

ASP.NET Team Blog
15 December 2020

As you may already know, v20.2 includes three new Blazor components - 'Grid Layout', 'Stack Layout', and 'Layout Breakpoint'. Use the first two layout components to create custom page layouts as needed. Once complete, use our new Layout Breakpoint component to deliver responsive layouts that adapt to different screen sizes.

Before I proceed, a quick word about v20.1 and our expired free Blazor UI component offer. If you downloaded v20.1 free-of-charge, you are entitled to use v20.1 as long as you wish. With our v20.2, our Blazor UI controls are no longer available free-of-charge. Should you require additional information on v20.1, please forward your comments to clientservices@devexpress.com.

New Blazor Grid Layout

Our new Grid Layout for Blazor allows you to arrange UI elements across a page. The component is based on CSS Grid Layout. To create a layout, simply define rows and columns, specify their size (Height, Width) and distance between them (RowSpacing, ColumnSpacing). Once ready, position layout items such as our Blazor Data Grid or other Blazor component within individual cells. A single item can span multiple rows and columns:

With this new UI element, you can address a variety of use cases. In the following image we use the Grid Layout to create a Dashboard style UI:

Demo | Documentation | GitHub Example

Adaptive Blazor Apps

Use the new LayoutBreakpoint component to create a responsive grid layout.

Demo | Documentation

New Blazor Stack Layout

The new Stack Layout for Blazor allows you to organize UI elements across a one-dimensional stack.

You can stack items using a vertical or horizontal orientation. To specify the item size (auto, pixel, percentage, etc.), use the Length property.

You can also use the LayoutBreakpoint component to adapt a stack layout to different screen sizes.

Demo | Documentation

Layout Breakpoints

The new Blazor Layout Breakpoint component allows you to adapt a page layout to different screen sizes. The new Blazor Layout Breakpoint component allows you to adapt a page layout to different screen sizes. You can use breakpoints to create a responsive Grid Layout and Stack Layout (or apply to any other component as necessary).

You can set up breakpoints in two different ways: either select from predefined sizes (DeviceSize) or set custom limits for width (MinWidth / MaxWidth).

Demo | Documentation | GitHub Example

Should you have any questions about these new features, or if you require assistance on our Blazor product line, please comment below. Please remember, that the features described in this post relate to v20.2. v20.2 is not available free-of-charge. The capabilities described in this post are available to those who own an active ASP.NET/DXperience/Universal Subscription.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
3 comment(s)
Konstantin Balashov
Konstantin Balashov
Is it possible to implement Splitter between items in Grid and Stack Layout?
15 December 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
@Konstantin, we plan to support 'grid layout item resize' feature in the future, it's in our plans.
15 December 2020
Stephen Winstanley_2
Stephen Winstanley_2
I really like this control and works well
21 December 2020

Please login or register to post comments.