You can use the Layout Breakpoint component to adapt page layout to different screen sizes. The IsActive property activates a specific breakpoint that corresponds to DeviceSize, MinWidth, or MaxWidth.

In this demo, the IsActive property is bound to the isXSmallScreen data field. When the screen is extra small, the breakpoint is activated, and the grid control hides its Contact Title and City columns. (You can also change column visibility regardless of screen size. Use the Column Chooser window for this purpose.)

This demo emulates Card View functionality by using the following DevExpress Blazor components:

• DxGridLayout arranges cards into rows and columns.
• DxPager implements navigation between pages.
• DxLayoutBreakpoint implements layout adaptivity. This component recalculates the page size, active page index, and number of rows and columns in a Grid Layout after the screen changes its size.