diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
index 8b9fb8df079..43b5bbc3bc9 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -304,6 +304,7 @@ describe('IgxGrid Component Tests', () => {
             TestBed.configureTestingModule({
                 declarations: [
                     IgxGridDefaultRenderingComponent,
+                    IgxGridColumnPercentageWidthComponent,
                     IgxGridWrappedInContComponent,
                     IgxGridFormattingComponent
                 ],
@@ -751,6 +752,16 @@ describe('IgxGrid Component Tests', () => {
                 }
             });
         });
+
+        fit('Should calculate default column width when a column has width in %', () => {
+            const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
+            fix.componentInstance.initColumnsRows(5, 3);
+            fix.detectChanges();
+
+            const grid = fix.componentInstance.grid;
+            expect(grid.columns[1].width).toEqual('150');
+            expect(grid.columns[1].width).toEqual('150');
+        });
     });
 
     describe('IgxGrid - keyboard navigation tests', () => {
@@ -3168,6 +3179,20 @@ export class IgxGridDefaultRenderingComponent {
     }
 }
 
+@Component({
+    template: `<igx-grid #grid [data]="data" [width]="'500px'" (onColumnInit)="initColumns($event)">
+        <igx-column *ngFor="let col of columns" [field]="col.key" [header]="col.key" [dataType]="col.dataType">
+        </igx-column>
+    </igx-grid>`
+})
+export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderingComponent {
+    public initColumns(column) {
+        if (column.index === 0) {
+            column.width = '40%';
+        }
+    }
+}
+
 @Component({
     template:
         `<div [style.width.px]="outerWidth" [style.height.px]="outerHeight">