css grid of images - responsiveness issues on browser resize

So I am drawing a total of 9 images on a 3x3 css grid (and our platform is Angular 11). Each image is passed into a child component, and drawn to a canvas.

Before the child component fires, I calculate the height/width of the grid cell in ngAfterViewInit(), then pass those values into the child component.

ngAfterViewInit() {
// FIRST TIME WE GET THE HT/WD OF OUR GRID TILE.
this.tileHeight = this.tileElem.nativeElement.clientHeight;
this.tileWidth = this.tileElem.nativeElement.clientWidth; 

}

Initially, it is not an issue getting the ht/wd of the grid cell div at this point.

However, on resize, I would like to recalculate the height/width of that grid cell div. But in some cases this div size reports the SAME size over and over again - no matter how much I resize my browser and set break points in the resize event function.

Two specific scenarios:

1. Maximize my browser then enter my view. Images are drawn to the canvas, and all images are properly scaled within each grid tile/cell. Resize my browser down a bit, and the canvas does NOT resize within each grid tile. The images all remain at the same size - NOT the expected behavior.

2. First Size my browser down to something below the screen max. Enter my grid view, and the images are properly scaled down to fit within each grid tile. Resize browser up and down just a little, and I can see the canvas resizing to properly scale my images. This is the EXPECTED behavior.

Scenario 1 screen shot (start with max'd browser, then size down. Images not scaling down):

Scenario 2 screen shot (start browser size down a bit, resize up and down. Images scale properly):

In parent component, get width/height of grid tile div:

export class myGridComponent implements AfterViewInit, OnInit, OnChanges { 

 @ViewChild('tileDiv', { static: false }) tileElem: ElementRef<HTMLElement>;
  @ViewChild('gridDiv', { static: false }) gridContainerDiv: ElementRef<HTMLElement>;
  tileHeight: number;
  tileWidth: number;
  gridHeight: number;
  
  @HostListener('window:resize', ['$event'])
  onResize(event: Event)
  {
    console.log(event.srcElement.innerHeight);
    this.tileHeight = THE_NEW_HEIGHT;
  }
    

ngAfterViewInit() {
    // FIRST TIME WE GET THE HT/WD OF OUR GRID TILE.
    this.tileHeight = this.tileElem.nativeElement.clientHeight;
    this.tileWidth = this.tileElem.nativeElement.clientWidth;
    this.gridHeight = this.gridContainerDiv.nativeElement.clientHeight;
  }
  
  
  }

<div
      *ngFor="let item of imagesItems; let index = index"
      #tileDiv
    >
        <!-- DRAW IMAGE TO TILE CANVAS -->
        <image-tile     
          [sourceImage]="item.image"          
          [height]="showFullscreenGrid ? gridHeight : tileHeight"
          [width]="tileWidth"
        ></image-tile>
        
</div>