diff --git a/skills/igniteui-react-components/SKILL.md b/skills/igniteui-react-components/SKILL.md
index a60fdde..12da141 100644
--- a/skills/igniteui-react-components/SKILL.md
+++ b/skills/igniteui-react-components/SKILL.md
@@ -178,3 +178,4 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
 6. **Handle events as `CustomEvent`** — not `React.SyntheticEvent`
 7. **Use refs sparingly** — prefer declarative props
 8. **Check slot names** in the docs
+9. **Never add `width` to grid columns by default** — `IgrGridLiteColumn` defaults to `minmax(136px, 1fr)` (responsive) and `IgrColumn` auto-sizes. Adding explicit pixel widths leaves empty space and breaks responsiveness. Only set `width` when the user explicitly requests it.
diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md
index d4748c2..8e71c8e 100644
--- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md
+++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md
@@ -383,6 +383,14 @@ export default function OrderList() {
 }
 ```
 
+## Column Width Rule (Grid Lite and Advanced Grids)
+
+> **⚠️ Do NOT set `width` on columns unless the user explicitly asks for specific column widths.**
+>
+> - `IgrGridLiteColumn` defaults to `minmax(136px, 1fr)` — columns are already responsive and fill all available space.
+> - `IgrColumn` (in `IgrGrid`, `IgrTreeGrid`, `IgrHierarchicalGrid`) also auto-sizes by default.
+> - Adding explicit pixel widths causes a fixed layout that leaves empty space on the right side of the grid.
+
 > **Column configuration notes:**
 > - `dataType` accepts `"string"` (default), `"number"`, `"boolean"` — set it explicitly so sorting and filtering work correctly for each column type.
 > - `cellTemplate` receives an `IgrCellContext<T>` where `ctx.value` is the cell value and `ctx.row.data` is the full row object.
diff --git a/skills/igniteui-react-generate-from-image-design/reference/gotchas.md b/skills/igniteui-react-generate-from-image-design/reference/gotchas.md
index 705c842..db836c9 100644
--- a/skills/igniteui-react-generate-from-image-design/reference/gotchas.md
+++ b/skills/igniteui-react-generate-from-image-design/reference/gotchas.md
@@ -99,6 +99,15 @@ In a flexible CSS Grid track, set `min-height: 0` on the grid cell and make the
 ### `roundShape` does NOT exist on `IgrAvatar`
 Use the supported `shape` input alone. Do not add `roundShape`.
 
+### Omit column `width` — both grid types are fluid by default
+
+When a design shows a grid with columns at specific visual widths, do not translate those pixel proportions into `width` props on `IgrGridLiteColumn` or `IgrColumn`.
+
+- `IgrGridLiteColumn` defaults to `minmax(136px, 1fr)` — responsive, fills all available space.
+- `IgrColumn` in advanced grids (`IgrGrid`, `IgrTreeGrid`, `IgrHierarchicalGrid`) also distributes space automatically.
+
+Adding explicit pixel widths causes a fixed layout that leaves empty space on the right side of the grid. Only set `width` if the user explicitly asks for fixed column widths.
+
 ### Tabs used for navigation should be label-only
 When a screenshot shows tabs that drive routed page content, use label-only `IgrTab` items and keep the routed content outside the `IgrTabs` component. Do not place inline tab panel content inside router-driven tabs.