|
| 1 | +# Grid Sizing — Width, Height, Column Sizing & Spacing |
| 2 | + |
| 3 | +> **Part of the [`igniteui-angular-grids`](../SKILL.md) skill hub.** |
| 4 | +> For grid setup, column config, sorting, filtering, selection — see [`structure.md`](./structure.md). |
| 5 | +> For virtualization and performance — see [`features.md`](./features.md). |
| 6 | +
|
| 7 | +## Contents |
| 8 | + |
| 9 | +- [Overview](#overview) |
| 10 | +- [Grid Width](#grid-width) |
| 11 | +- [Grid Height](#grid-height) |
| 12 | +- [Column Sizing](#column-sizing) |
| 13 | +- [Grid Cell Spacing Control](#grid-cell-spacing-control) |
| 14 | +- [Key Rules](#key-rules) |
| 15 | + |
| 16 | +## Overview |
| 17 | + |
| 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 | + |
| 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 | + |
| 22 | +## Grid Width |
| 23 | + |
| 24 | +> **Docs:** [Grid Sizing — Width](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#width) |
| 25 | +
|
| 26 | +**Default:** `100%` — the grid fills available width of the parent/window. |
| 27 | + |
| 28 | +### Pixel Width |
| 29 | + |
| 30 | +```html |
| 31 | +<igx-grid width="1200px" ...></igx-grid> |
| 32 | +``` |
| 33 | + |
| 34 | +- Grid is fixed at the specified size and does not react to browser/DOM resizing. |
| 35 | +- A horizontal scrollbar appears inside the grid when the combined column widths exceed the grid `width`. |
| 36 | +- If a parent element is narrower than the grid and has `overflow: auto | scroll`, the parent scrolls — the grid itself remains at its specified width. |
| 37 | + |
| 38 | +### Percentage Width |
| 39 | + |
| 40 | +```html |
| 41 | +<igx-grid width="100%" ...></igx-grid> |
| 42 | +``` |
| 43 | + |
| 44 | +- Grid sizes relative to its parent element (or the browser window if there is no parent with explicit width). |
| 45 | +- Resizes responsively when the browser or parent is resized. |
| 46 | +- Setting `width` above `100%` (e.g. `150%`) makes the grid wider than the parent; the parent renders a scrollbar only if it has `overflow: auto | scroll`. |
| 47 | + |
| 48 | +## Grid Height |
| 49 | + |
| 50 | +> **Docs:** [Grid Sizing — Height](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#height) |
| 51 | +
|
| 52 | +**Default:** `100%` — see the Percentage Height section for how this behaves depending on the DOM structure. |
| 53 | + |
| 54 | +### `null` Height |
| 55 | + |
| 56 | +```html |
| 57 | +<igx-grid [height]="null" ...></igx-grid> |
| 58 | +``` |
| 59 | + |
| 60 | +- All rows are rendered — **row virtualization is disabled**. |
| 61 | +- Grid height expands to show every row with no vertical scrollbar inside the grid. |
| 62 | +- If rows overflow the viewport, the browser renders a native scrollbar. |
| 63 | +- A parent element with `overflow: auto | scroll` will scroll while the grid itself remains unshrunk. |
| 64 | +- **Warning:** large data sets with `null` height can significantly impact browser performance due to no virtualization. |
| 65 | + |
| 66 | +### Pixel Height |
| 67 | + |
| 68 | +```html |
| 69 | +<igx-grid height="500px" ...></igx-grid> |
| 70 | +``` |
| 71 | + |
| 72 | +- Grid is fixed at the specified height. |
| 73 | +- A vertical scrollbar appears when rows exceed the visible area. |
| 74 | +- If the grid is taller than a parent with `overflow: auto | scroll`, the parent scrolls. |
| 75 | + |
| 76 | +### Percentage Height |
| 77 | + |
| 78 | +```html |
| 79 | +<igx-grid height="100%" ...></igx-grid> |
| 80 | +``` |
| 81 | + |
| 82 | +- Grid sizes relative to the **parent element's height**. |
| 83 | +- **Parent has explicit height** (px or %): grid sizes to that percentage of the parent's height. |
| 84 | +- **Parent has NO explicit height**: the browser cannot resolve a percentage, so the grid falls back to rendering a maximum of **10 rows** with a vertical scrollbar if there are more rows, or fits all rows if there are fewer. |
| 85 | +- To fill the entire browser window: set both `body` and the parent container `height: 100%`, then use `height="100%"` on the grid. |
| 86 | + |
| 87 | +```css |
| 88 | +/* Full-window grid */ |
| 89 | +html, body, .grid-container { |
| 90 | + height: 100%; |
| 91 | +} |
| 92 | +``` |
| 93 | + |
| 94 | +```html |
| 95 | +<div class="grid-container"> |
| 96 | + <igx-grid height="100%" ...></igx-grid> |
| 97 | +</div> |
| 98 | +``` |
| 99 | + |
| 100 | +## Column Sizing |
| 101 | + |
| 102 | +> **Docs:** [Grid Sizing — Column Sizing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#column-sizing) |
| 103 | +
|
| 104 | +### Default (no `width` set — auto-sized) |
| 105 | + |
| 106 | +- Auto-sized columns share the available grid width equally. |
| 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. |
| 108 | +- Feature columns (row selector checkbox, etc.) consume space that reduces what is available for auto-sized columns. |
| 109 | + |
| 110 | +```html |
| 111 | +<!-- No width on these columns — they auto-fill available space --> |
| 112 | +<igx-column field="name" header="Name"></igx-column> |
| 113 | +<igx-column field="email" header="Email"></igx-column> |
| 114 | +``` |
| 115 | + |
| 116 | +### Pixel Width |
| 117 | + |
| 118 | +```html |
| 119 | +<igx-column field="name" width="200px"></igx-column> |
| 120 | +``` |
| 121 | + |
| 122 | +- Column is fixed at the specified width regardless of grid size. |
| 123 | +- If the combined column widths are less than the grid width, empty space appears on the right — this is expected. |
| 124 | +- If the combined column widths exceed the grid width, a horizontal scrollbar is rendered. |
| 125 | + |
| 126 | +### `auto` Width |
| 127 | + |
| 128 | +```html |
| 129 | +<igx-column field="description" width="auto"></igx-column> |
| 130 | +``` |
| 131 | + |
| 132 | +- Column sizes to fit the longest visible cell value. |
| 133 | +- May leave empty space if most values are short but one is very long. |
| 134 | + |
| 135 | +### Percentage Width |
| 136 | + |
| 137 | +```html |
| 138 | +<igx-column field="name" width="20%"></igx-column> |
| 139 | +``` |
| 140 | + |
| 141 | +- Column width is calculated as a percentage of the grid width. |
| 142 | +- Responsive — resizes when the grid resizes. |
| 143 | +- Combined percentages less than `100%` leave an empty area; greater than `100%` triggers a horizontal scrollbar. |
| 144 | + |
| 145 | +## Grid Cell Spacing Control |
| 146 | + |
| 147 | +> **Docs:** [Grid Sizing — Cell Spacing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#grid-cell-spacing-control) |
| 148 | +
|
| 149 | +The grid automatically adapts internal cell spacing based on the `size` (display density) setting. Fine-grained control is available through CSS custom properties. |
| 150 | + |
| 151 | +### Global Spacing (all grids in the app) |
| 152 | + |
| 153 | +```css |
| 154 | +igx-grid { |
| 155 | + --ig-spacing: 0.8; /* multiplier — reduces all grid spacing by 20% */ |
| 156 | +} |
| 157 | +``` |
| 158 | + |
| 159 | +### Instance-Specific Spacing |
| 160 | + |
| 161 | +```css |
| 162 | +.my-compact-grid { |
| 163 | + --ig-spacing: 0.6; |
| 164 | +} |
| 165 | +``` |
| 166 | + |
| 167 | +### Directional Spacing (horizontal vs vertical independently) |
| 168 | + |
| 169 | +```css |
| 170 | +.my-grid { |
| 171 | + --ig-spacing-inline: 0.5; /* horizontal padding */ |
| 172 | + --ig-spacing-block: 1.0; /* vertical padding */ |
| 173 | +} |
| 174 | +``` |
| 175 | + |
| 176 | +### Density-Level Spacing |
| 177 | + |
| 178 | +```css |
| 179 | +.my-grid { |
| 180 | + --ig-spacing-small: 0.5; /* compact density */ |
| 181 | + --ig-spacing-medium: 1.0; /* medium density */ |
| 182 | + --ig-spacing-large: 1.3; /* comfortable density */ |
| 183 | +} |
| 184 | +``` |
| 185 | + |
| 186 | +### Header vs Body Cell Spacing |
| 187 | + |
| 188 | +```css |
| 189 | +.my-grid igx-grid-header { |
| 190 | + --ig-spacing: 0.7; |
| 191 | +} |
| 192 | + |
| 193 | +.my-grid igx-grid-cell { |
| 194 | + --ig-spacing: 0.9; |
| 195 | +} |
| 196 | +``` |
| 197 | + |
| 198 | +## Key Rules |
| 199 | + |
| 200 | +- Grid sizing can come from CSS/layout context (host/container sizing) or from `[width]`/`[height]` inputs. |
| 201 | +- **Never** override `box-sizing` on the grid — it uses border-box and relies on this. |
| 202 | +- Use `null` for height only when the data set is small; row virtualization is disabled and large data will hurt performance. |
| 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. |
| 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