Description

When using igx-grid with columns that have width defined in percentages and sum to exactly 100%, there is a visual misalignment between the header cells and the data cells. This happens when the grid is placed inside a container with a small fixed width (e.g., 420px).

Even though the column widths add up to 100% and the grid itself is set to width: 100%, the rendered layout causes width mismatch between the header and body, especially visible at smaller container sizes.

• igniteui-angular version: 18.2 19.0 19.2
• browser: All (reproducible in latest)

Steps to reproduce

1. Place igx-grid inside a container with fixed small width and height:

.grid__wrapper {
     width: 420px;
     height: 275px;
}

2. Set the grid to occupy 100% of its container:
   <igx-grid width="100%" height="100%" [data]="data">...</igx-grid>
3. Define dynamic columns whose widths total exactly 100%.
4. Observe the rendered grid.

Result

Header columns and their corresponding cells are misaligned.

Expected result

Header and and their corresponding cells should align exactly.

Attachments

Reproduction sample: StackBlitz
Attached screenshots: