# Grid Layout

**Path:** Components/Layout

[Back to Documentation Index](https://rubicblazor.skyconis.com/docs.md)

---

Grid Layout

 Arrange Blazor widgets in a responsive cell grid without an external JavaScript library.
 Drag a handle or focus it and use the arrow keys.
 Colliding widgets move down. Widget contents retain their component instances.

 Drag and collisions

 Move a widget over another widget to see the collision resolution. Toggle editing to use the content normally.

 Show code

 Edit layout 

 Calendar
 Drag another widget here.

 Notes 

 Tasks
 Collisions move widgets down.

 Favorites
 The note remains while you rearrange widgets.

 Committed changes: 0

 Container breakpoints

 Change the container width without resizing the browser. The canonical desktop layout is preserved.
 A responsive move changes widget order while retaining desktop dimensions.

 Show code

 400px / 1 column 

 750px / 6 columns 

 1100px / 12 columns 

 Widget 1

 Widget 2

 Widget 3

 Widget 4

 Widget 5

 Widget 6

 Committed changes: 0. Container resizing alone leaves this count unchanged.

 Size constraints

 Resize using the bottom corner. Limits are in cells, not pixels. Minimum widths are scaled for narrow layouts.
 Movable=false keeps the item anchored during dragging, collisions and upward packing.
 ApplyMinHeightWhenWidth applies MinHeight at or below the specified width; ApplyMinWidthWhenHeight applies MinWidth at or below the specified height.
 Omit a threshold to apply its minimum always. Width thresholds and minimum widths scale with responsive columns.

 Show code

 Resizable
 Width 3–8 cells; height 2–5 cells.

 Fixed size
 Move using its top handle.

 No move handle
 Can resize, but keeps its anchor when other items collide.

 Conditional limits: try narrowing the first item and shortening the second item.

 Width at or below 5
 Requires height of at least 5 cells.

 Height at or below 3
 Requires width of at least 6 cells.

 Resize to see committed cell dimensions.

 Layout binding and widget lifecycle

 Bind Layout to LayoutChanged, take a detached snapshot, restore it and toggle an optional widget.
 Persistence is owned by the application. Restoring a layout updates positions without replacing widget contents.

 Show code

 Capture layout 

 Restore captured layout 

 Show extra widget 

 First
 State stays here 

 Second

 null 

 RTL and keyboard

 Columns start at the right in RTL. Arrow keys follow the visual direction; resizing grows toward the left.

 Show code

 Right / بداية الأعمدة

 Left / اسحب المقبض

 API
 RbGridLayout: Columns (12), RowHeight (80px), Gap (12px), Editable (false), Breakpoints,
 Layout, LayoutChanged, OnReady (initial browser placement), GetLayout(). Disabled and Readonly disable editing.

 RbGridLayoutItem: ItemId (required and unique), Title (handle label), X/Y (zero-based),
 Width/Height (cells), MinWidth/MinHeight, MaxWidth/MaxHeight, ApplyMinHeightWhenWidth, ApplyMinWidthWhenHeight, Movable, Resizable, ChildContent.

 Default container breakpoints: below 600px = 1 column; 600–899px = up to 6 columns;
 900px and above = up to 12 columns. Use an empty Breakpoints array for a fixed column count.
 Initial X/Y/Width/Height supply defaults; use Layout to replace an existing arrangement.
 LayoutChanged returns canonical positions after committed interaction or initial normalization;
 resizing the container alone does not emit a saved-layout change.

 Conditional thresholds are in cells and include equality. Maximum limits always apply.
 Stationary items must not overlap each other.
 Container breakpoints can project their positions; interaction cannot move their current anchors.

 Widget contents must adapt to their available width. This component manages their outer placement.
 Nested grids and transfers between grids are outside this component's scope.

 ✕

 Contents