fix(grid-list): allow more units for gutter width and row height (#14341)

Currently the function that normalizes the units only allows `px`, `em` and `rem`. These changes expand it to cover more units.

Author: crisbeto

src/lib/grid-list/grid-list.spec.ts

@@ -207,6 +207,19 @@ describe('MatGridList', () => {
     expect(getStyle(tiles[2], 'top')).toBe('102px');
   });
 
+  it('should allow alternate units for the gutter size', () => {
+    const fixture = createComponent(GridListWithUnspecifiedGutterSize);
+    const gridList = fixture.debugElement.query(By.directive(MatGridList));
+
+    gridList.componentInstance.gutterSize = '10%';
+    fixture.detectChanges();
+
+    const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
+
+    expect(getStyle(tiles[0], 'width')).toBe('90px');
+    expect(getComputedLeft(tiles[1])).toBe(110);
+  });
+
   it('should set the correct list height in ratio mode', () => {
     const fixture = createComponent(GridListWithRatioHeightAndMulipleRows);
     fixture.detectChanges();

src/lib/grid-list/tile-styler.ts

@@ -286,11 +286,13 @@ export class FitTileStyler extends TileStyler {
 
 
 /** Wraps a CSS string in a calc function */
-function calc(exp: string): string { return `calc(${exp})`; }
+function calc(exp: string): string {
+  return `calc(${exp})`;
+}
 
 
 /** Appends pixels to a CSS string if no units are given. */
 function normalizeUnits(value: string): string {
-  return (value.match(/px|em|rem/)) ? value : value + 'px';
+  return value.match(/([A-Za-z%]+)$/) ? value : `${value}px`;
 }