CSS实现左聊天-中棋盘-右控制面板布局：棋盘无间隙且保持正方形

需求：实现左侧聊天面板、中间棋盘、右侧控制面板的三栏布局，要求三者居中排列且无间隙，棋盘占据最大可用空间并保持正方形，优先纯CSS方案。

当前问题：使用容器查询和100cqmin实现棋盘正方形，但棋盘与右侧控制面板间存在空隙，布局未完全贴合。

现有代码：

*,*::before,*::after {box-sizing: border-box;}
body {--nav-height: 50px;margin: 0;}
nav {height: var(--nav-height);background-color: firebrick;}
.layout {height: calc(100dvh - var(--nav-height));display: grid;grid-template-rows: auto 1fr auto;}
.chat {flex: 0 1 300px;background-color: mediumpurple;}
.controls {flex: 0 1 300px;background-color: mediumpurple;}
.gameplay {display: flex;justify-content: center;}
.board-container {width: 100%;container-type: size;container-name: board-container;border: 5px dotted green;}
.board {height: 100cqmin;aspect-ratio: 1;background-color: saddlebrown;}

<header>
  <nav>nav</nav>
</header>

<main>
  <section class="layout">
    <div class="player">stonkfish 04:35</div>
    <div class="gameplay">
      <aside class="chat">chat</aside>
      <div class="board-container">
        <div class="board">board</div>
      </div>
      <aside class="controls">controls</aside>
    </div>
    <div class="player">bozo 03:59</div>
  </section>
</main>

效果演示：

纯CSS解决方案 #

方案1：Flex布局+min()函数（推荐） #

核心思路：固定左右栏宽度，中间栏占满剩余空间，用min()限制棋盘最大尺寸，确保正方形且不超出容器边界。

修改后CSS：

*,*::before,*::after {box-sizing: border-box;}
body {--nav-height: 50px; --player-height: 40px; margin: 0;}
nav {height: var(--nav-height);background-color: firebrick;}
.layout {
  height: calc(100dvh - var(--nav-height));
  display: grid;
  grid-template-rows: var(--player-height) 1fr var(--player-height);
}
.chat, .controls {
  flex-shrink: 0; /* 禁止左右栏收缩 */
  width: 300px;
  background-color: mediumpurple;
}
.gameplay {
  display: flex;
  align-items: center; /* 垂直居中布局 */
  gap: 0; /* 消除栏间默认间隙 */
}
.board-container {
  flex: 1; /* 中间栏占满剩余可用空间 */
  display: grid;
  place-content: center; /* 棋盘在容器内居中 */
  height: 100%;
}
.board {
  /* 取容器宽度和视口可用高度的最小值，确保正方形且不超出边界 */
  width: min(100%, calc(100dvh - var(--nav-height) - 2*var(--player-height)));
  aspect-ratio: 1;
  background-color: saddlebrown;
}

方案2：Grid布局+容器查询（精准适配容器） #

如果需要完全基于中间容器的宽高比适配棋盘，容器查询能实现更精准的响应：

修改后CSS：

*,*::before,*::after {box-sizing: border-box;}
body {--nav-height: 50px; --player-height: 40px; margin: 0;}
nav {height: var(--nav-height);background-color: firebrick;}
.layout {
  height: calc(100dvh - var(--nav-height));
  display: grid;
  grid-template-rows: var(--player-height) 1fr var(--player-height);
}
.chat, .controls {
  width: 300px;
  background-color: mediumpurple;
}
.gameplay {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
}
.board-container {
  container-type: size;
  container-name: board-container;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}
/* 根据容器宽高比自动调整棋盘尺寸 */
@container board-container (width >= height) {
  .board {
    height: 100%;
    aspect-ratio: 1;
  }
}
@container board-container (height > width) {
  .board {
    width: 100%;
    aspect-ratio: 1;
  }
}

关键调整说明 #

• 移除.gameplay的justify-content: center，避免中间容器被过度拉伸导致间隙
• 固定左右栏宽度并禁止收缩，确保布局结构稳定
• 用grid或flex让中间栏占满剩余空间，彻底消除栏间空隙
• 通过min()函数或容器查询，确保棋盘始终保持正方形且不超出可用空间

内容的提问来源于stack exchange，提问作者dankobgd