|
17 | 17 |
|
18 | 18 | The grid uses **border-box sizing** — border and padding are included in the width/height calculations. Do **not** override `box-sizing` on the grid element; doing so will break size calculations. |
19 | 19 |
|
20 | | -The grid supports both component inputs (`width`/`height`) and regular CSS/layout sizing from the host or wrapping container (including flex/grid layouts). Use the inputs when you need explicit grid sizing behavior such as `null` sizing that disables virtualization. |
| 20 | +The grid supports both component inputs (`width`/`height`) and regular CSS/layout sizing from the host or wrapping container (including flex/grid layouts). Use the inputs when you need explicit fixed or percentage grid sizing. |
21 | 21 |
|
22 | 22 | ## Grid Width |
23 | 23 |
|
24 | 24 | > **Docs:** [Grid Sizing — Width](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#width) |
25 | 25 |
|
26 | 26 | **Default:** `100%` — the grid fills available width of the parent/window. |
27 | 27 |
|
28 | | -### `null` Width |
29 | | - |
30 | | -```html |
31 | | -<igx-grid [width]="null" ...></igx-grid> |
32 | | -``` |
33 | | - |
34 | | -- All columns are rendered in the DOM — **column virtualization is disabled**. |
35 | | -- Grid width expands to fit all column widths (minimum `136px` per column when no column widths are set). |
36 | | -- No horizontal scrollbar inside the grid; the browser may render a native scrollbar if content overflows the viewport. |
37 | | -- This is an edge-case mode intended when disabling column virtualization is desired; in layout-constrained containers (for example flex/grid wrappers), the expanding content width can break expected responsive sizing. |
38 | | -- **Warning:** large column counts with `null` width can significantly impact browser performance due to no virtualization. |
39 | | - |
40 | 28 | ### Pixel Width |
41 | 29 |
|
42 | 30 | ```html |
@@ -117,7 +105,6 @@ html, body, .grid-container { |
117 | 105 |
|
118 | 106 | - Auto-sized columns share the available grid width equally. |
119 | 107 | - Minimum column width is **`136px`**; if the equal share is less than `136px`, all auto-sized columns default to `136px` and the grid renders a horizontal scrollbar. |
120 | | -- When grid `width` is `null`, auto-sized columns default to `136px` each. |
121 | 108 | - Feature columns (row selector checkbox, etc.) consume space that reduces what is available for auto-sized columns. |
122 | 109 |
|
123 | 110 | ```html |
@@ -154,7 +141,6 @@ html, body, .grid-container { |
154 | 141 | - Column width is calculated as a percentage of the grid width. |
155 | 142 | - Responsive — resizes when the grid resizes. |
156 | 143 | - Combined percentages less than `100%` leave an empty area; greater than `100%` triggers a horizontal scrollbar. |
157 | | -- **If the grid `width` is `null`**, percentage column widths fall back to `136px` each — the grid has no base width to resolve against. |
158 | 144 |
|
159 | 145 | ## Grid Cell Spacing Control |
160 | 146 |
|
@@ -211,9 +197,8 @@ igx-grid { |
211 | 197 |
|
212 | 198 | ## Key Rules |
213 | 199 |
|
214 | | -- Grid sizing can come from CSS/layout context (host/container sizing) or from `[width]`/`[height]` inputs. Use `null` width/height only intentionally, because it disables virtualization. |
| 200 | +- Grid sizing can come from CSS/layout context (host/container sizing) or from `[width]`/`[height]` inputs. |
215 | 201 | - **Never** override `box-sizing` on the grid — it uses border-box and relies on this. |
216 | | -- Use `null` for width/height only when the data set is small; virtualization is disabled and large data will hurt performance. |
| 202 | +- Use `null` for height only when the data set is small; row virtualization is disabled and large data will hurt performance. |
217 | 203 | - When using percentage height, the parent **must** have an explicit height for the percentage to resolve correctly. Without it, the grid falls back to 10 visible rows. |
218 | | -- Percentage column widths combined with `width="null"` on the grid always fall back to `136px` per column. |
219 | 204 | - A mix of fixed-width and auto-sized columns is valid — auto-sized columns fill the remaining space after fixed-width columns are laid out. |
0 commit comments