Collapsing CSS grid column not working for a specific column

I am using a grid to display some canvases in 3 of 4 columns, called left-, right- and middle- columns. The fourth column on the extreme left will hold other HTML elements and is called select-column. The grid is to take up the full width and height of the screen.

The three canvas columns are of equal width and the select column is to be of width of 150 px. That is to say I want the three columns to equally share 100vw-150px OR equally share 100vw.

A further requirement is that I want to be able to collapse/hide each of the columns via button controls. To create the columns I have used:

grid-template-columns: minmax(0, 150px) repeat(auto-fit, minmax(0, 1fr));

So when a column is collapsed it takes up zero space. However what I have found is that when I collapse select-column it still continues to take up space. This is not the case for the canvas columns, they work as expected.

A full example is here: Stackblitz example Updated as below

You will see that the buttons move as expected but the select-column (the white one) always remains and this is not desired.

Update

I've updated the stackblitz example with the suggested changes and these are the relevant files:

<div class="grid-container">
  <div class="select-column" [class.hide-column]="isSelectColumnHidden">
  </div>
  <div class="left-column" [class.hide-column]="isLeftColumnHidden">
    <canvas #leftCanvas class="left-canvas"></canvas>
  </div>

  <div class="middle-column" [class.hide-column]="isMiddleColumnHidden">
    <canvas #middleCanvas class="middle-canvas"></canvas>
  </div>
  <div class="right-column" [class.hide-column]="isRightColumnHidden">
    <canvas #rightCanvas class="right-column"></canvas>
  </div>
</div>

<div class="controls-container" [class.controls-container-left]="!isSelectColumnHidden">
  <button class="control-button" (click)="toggleColumn('select')" >{{isSelectColumnHidden ? 'Show Select' : 'Hide Select'}}</button>
  <button class="control-button" (click)="toggleColumn('left')" >{{isLeftColumnHidden ? 'Show Left' : 'Hide Left'}}</button>
  <button class="control-button" (click)="toggleColumn('middle')">{{isMiddleColumnHidden ? 'Show Middle' : 'Hide Middle'}}</button>
  <button class="control-button" (click)="toggleColumn('right')">{{isRightColumnHidden ? 'Show Right' : 'Hide Right'}}</button>
</div>

.grid-container {
  position: relative;
  display: grid;
  grid-column-gap: 0;
  grid-row-gap: 0;
/* suggested chage */
  grid-template-columns: auto repeat(auto-fit, minmax(0, 1fr));
  grid-template-rows: 100vh;
}

.select-column, .left-column, .middle-column, .right-column {
  width: 100%;
  height: 100%;
  position: relative;
  grid-row: 1;
}

.select-column {
  /* suggested change */
  min-width: 150px;
  grid-column: 1;
}

.left-column {
  grid-column: 2;
}

.middle-column {
  grid-column: 3;
}

.right-column {
  grid-column: 4;
}

.hide-column {
  display: none;
}

.left-canvas, .middle-canvas, .right-canvas {
  width: 100%;
  height: 100%;
}

.controls-container {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
}

.controls-container-left {
  left: 150px;
}

.control-button {
  position: relative;
}

export class AppComponent implements AfterViewInit {

  @ViewChild('leftCanvas', {static: false}) leftCanvas: ElementRef<HTMLCanvasElement>;
  @ViewChild('middleCanvas', {static: false}) middleCanvas: ElementRef<HTMLCanvasElement>;
  @ViewChild('rightCanvas', {static: false}) rightCanvas: ElementRef<HTMLCanvasElement>;

  private leftCTX: CanvasRenderingContext2D;
  private middleCTX: CanvasRenderingContext2D;
  private rightCTX: CanvasRenderingContext2D;

  isSelectColumnHidden: boolean = false;
  isLeftColumnHidden: boolean = false;
  isMiddleColumnHidden: boolean = false;
  isRightColumnHidden: boolean = false;


ngAfterViewInit(): void {
    this.leftCTX = this.leftCanvas.nativeElement.getContext('2d');
    this.leftCTX.fillStyle = 'blue';
    this.leftCTX.fillRect(0, 0, this.leftCanvas.nativeElement.width, this.leftCanvas.nativeElement.height);
    //this.leftCanvas.nativeElement.style.width = '100%'

    // @ts-ignore
    this.middleCTX = this.middleCanvas.nativeElement.getContext('2d');
    this.middleCTX.fillStyle = 'red';
    this.middleCTX.fillRect(0, 0, this.middleCanvas.nativeElement.width, this.middleCanvas.nativeElement.height);

    // @ts-ignore
    this.rightCTX = this.rightCanvas.nativeElement.getContext('2d');
    this.rightCTX.fillStyle = 'yellow';
    this.rightCTX.fillRect(0, 0, this.rightCanvas.nativeElement.width, this.rightCanvas.nativeElement.height);
}

toggleColumn(columnName: string): void {
  switch (columnName) {
    case 'select':
      this.isSelectColumnHidden = !this.isSelectColumnHidden;
      break;
    case 'left':
      this.isLeftColumnHidden = !this.isLeftColumnHidden;
      break;
    case 'middle':
      this.isMiddleColumnHidden = !this.isMiddleColumnHidden;
      break;
    case 'right':
      this.isRightColumnHidden = !this.isRightColumnHidden;
      break;
  }
}
  
}