uno-responsive-spanning-gridwrap-layout

Create responsive grid layouts for Uno Platform ItemsRepeater with per-item column spans.

7|Updated Mar 13, 2026

Search Tags:#responsive-design #dashboard-ui #grid-layout #uno-platform #column-span #ItemsRepeater

Ready to run

npx skills add https://github.com/VincentH-Net/dotnet-agentic-engineering --skill uno-responsive-spanning-gridwrap-layout

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: uno-responsive-spanning-gridwrap-layout
Source: https://github.com/VincentH-Net/dotnet-agentic-engineering/tree/main/plugins/uno-platform/skills/uno-responsive-spanning-gridwrap-layout
Command: npx skills add https://github.com/VincentH-Net/dotnet-agentic-engineering --skill uno-responsive-spanning-gridwrap-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Arrange fixed-height items in a responsive wrapping grid that supports per-item column spans, enabling dashboard and card-based UIs with varying item widths but uniform height.

Core Features & Use Cases

Flows items left-to-right, top-to-bottom with automatic wrapping
Per-item column spans via an attached property
Proportional stretch-to-fill to eliminate leftover horizontal space per row
Vertical gap alignment across rows and full-width header rows
Responsive column count derived from available width and MinColumnWidth

Quick Start

Copy the ResponsiveSpanningGridWrapLayout.cs into your project's controls folder and update the namespace.

Frequently Asked Questions about uno-responsive-spanning-gridwrap-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a responsive grid layout in Uno Platform with varying item widths and per-item column spans?▼

To create a responsive grid layout in Uno Platform with varying item widths and per-item column spans, use a custom non-virtualizing layout for ItemsRepeater. It flows items left-to-right with automatic wrapping and assigns column spans via an attached property for dashboard-style UIs.

Does Uno Platform ItemsRepeater support dashboard card layouts with full-width headers and vertical gap alignment?▼

Uno Platform ItemsRepeater supports dashboard card layouts with full-width headers and vertical gap alignment when using a custom spanning layout. This layout aligns rows vertically and handles full-width header rows while maintaining uniform item heights.

What is the best way to make ItemsRepeater items stretch to fill remaining horizontal space in a row?▼

The best way to make ItemsRepeater items stretch to fill remaining horizontal space is using a proportional stretch-to-fill layout. This custom grid wrap layout eliminates leftover horizontal space per row by proportionally stretching items.

How do I calculate responsive column counts for an Uno Platform dashboard based on available width?▼

You calculate responsive column counts for an Uno Platform dashboard by deriving them from the available container width and a specified minimum column width. The layout automatically adjusts the number of columns as the available width changes.

Can I build card-based UIs in Uno Platform where items share a fixed height but have varying widths?▼

You can build card-based UIs in Uno Platform where items share a fixed height but have varying widths by implementing a custom grid wrap layout. It arranges fixed-height items with varying widths and supports per-item column spans for dashboard applications.

How to add a custom responsive grid layout to an Uno Platform project?▼

To add a custom responsive grid layout to an Uno Platform project, copy the ResponsiveSpanningGridWrapLayout.cs file into your project's controls folder and update the namespace to match your project structure. No external dependencies are required.