Collapsing CSS网格列不适用于特定列

Question

我正在使用网格在4列中的3列中显示一些画布，称为左 -，右 -和中间 -列。最左侧的第四列将容纳其他HTML元素，并称为select-column。网格是占据屏幕的全宽度和高度。

这三个画布列的宽度相等，选择列的宽度为150 px。也就是说，我希望这三列能够平等共享100VW-150px或同等共享100VW。

另一个要求是，我希望能够通过按钮控件折叠/隐藏每个列。为了创建我使用的列：

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

因此，当列折叠时，它占用零空间。但是，我发现的是，当我崩溃选择柱时，它仍然会继续占用空间。对于画布列而言，情况并非如此，它们可以按预期工作。

一个完整的示例在这里： 如下更新了，

您会看到按钮按预期移动，但是select-column（白色）总是保留，这是不需要的。

Update

我已经更新了Stackblitz示例，其中建议的更改是相关文件：

<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;
  }
}
  
}