diff --git a/skills/igniteui-blazor-grids/references/sizing.md b/skills/igniteui-blazor-grids/references/sizing.md index 2ac7a8f..d8ff86f 100644 --- a/skills/igniteui-blazor-grids/references/sizing.md +++ b/skills/igniteui-blazor-grids/references/sizing.md @@ -265,12 +265,13 @@ Apply different sizing to a specific grid: ## Key Rules -1. **Always set `Height` for performance** - without it, virtualization is disabled and all rows render to the DOM. +1. **Do not add column `Width` unless explicitly requested** — omitting `Width` causes the grid to distribute available space proportionally across all columns, producing a responsive layout with no empty space. Only set explicit pixel or percentage widths when the user specifically asks for fixed column sizing. +2. **Always set `Height` for performance** - without it, virtualization is disabled and all rows render to the DOM. 2. **Percentage height needs a sized parent** - `Height="100%"` only works if the parent element has an explicit height. 3. **Box model is border-box** - column widths include padding and borders. 4. **Horizontal scroll triggers when columns overflow** - if total column width > grid width, a horizontal scrollbar appears. 5. **`MinWidth` and `MaxWidth` constrain resizing** - always set them when `Resizable="true"` for predictable UX. 6. **`--ig-size` controls the overall density** - it affects row height, cell padding, header height, and internal spacing. -7. **Column virtualization requires column widths** - without widths, the grid cannot calculate which columns are outside the viewport. +7. **Column virtualization works without explicit per-column widths** — when no `Width` is set on a column, the grid distributes available space across all columns (minimum 136px per column). If columns cannot fit at that minimum, a horizontal scrollbar appears and horizontal virtualization activates automatically. You can also set a grid-level default with `ColumnWidth` on `IgbGrid` instead of setting per-column widths. Only set per-column `Width` when a specific column needs a fixed or percentage size. 8. **Auto-size is a one-time operation** - `Width="auto"` on a column fits content at initial render; it doesn't update dynamically as data changes. 9. **Row height consistency** - all rows in a grid have the same height. Variable row height is not supported. \ No newline at end of file diff --git a/skills/igniteui-blazor-grids/references/structure.md b/skills/igniteui-blazor-grids/references/structure.md index 319307a..315c532 100644 --- a/skills/igniteui-blazor-grids/references/structure.md +++ b/skills/igniteui-blazor-grids/references/structure.md @@ -497,4 +497,5 @@ Or grid-wide: 4. **Registration is mandatory** - every grid module must be registered in `Program.cs` or the component silently fails to render. 5. **Use PascalCase for all parameters** - Blazor parameters use PascalCase (`Sortable`, `Filterable`), not kebab-case. 6. **Data must be a C# collection** - `List`, `T[]`, or `IEnumerable`. Not a JSON string or JavaScript object. -7. **Use `@ref` for programmatic access** - declare `private IgbGrid grid = default!;` and use `@ref="grid"` on the component. \ No newline at end of file +7. **Use `@ref` for programmatic access** - declare `private IgbGrid grid = default!;` and use `@ref="grid"` on the component. +8. **Do not add column `Width` unless explicitly requested** - omitting `Width` lets the grid distribute available space proportionally, filling the container with no empty right-side gap. Only set pixel or percentage widths when the user specifically asks for fixed column sizing. \ No newline at end of file diff --git a/skills/igniteui-blazor-grids/references/types.md b/skills/igniteui-blazor-grids/references/types.md index 4e2c59f..f82f8f3 100644 --- a/skills/igniteui-blazor-grids/references/types.md +++ b/skills/igniteui-blazor-grids/references/types.md @@ -40,7 +40,7 @@ Columns are declared as child elements (``), not via a `Colum - + ``` @@ -67,7 +67,7 @@ Columns are declared as child elements (``), not via a `Colum ```razor - + @code {