如何调整2×2网格中右侧div元素的高度？

要实现你想要的布局，需要通过网格线定位来让不同列的元素跨越不同行高——原布局的两行结构无法单独调整某一列的行高，具体实现如下：

核心思路 #

左右列总高度需保持一致（左边4fr+1fr=5fr，右边3fr+2fr=5fr），因此我们将网格行划分为3fr 1fr 1fr（总高度5fr），再通过指定元素的行跨度分配高度：

• GameTable 跨越前两行（3fr+1fr=4fr）
• ChatBox 仅占第一行（3fr）
• InfoTable 仅占第三行（1fr）
• GameCommands 跨越后两行（1fr+1fr=2fr）

修改后的代码 #

CSS 部分

.gameScreen {
  display: grid; 
  height: 100%;
  width: 100%;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 3fr 1fr 1fr; /* 拆分3行，总高度匹配左右列总和 */
}

/* 给每个子元素指定网格位置 */
.GameTable {
  grid-column: 1;
  grid-row: 1 / span 2; /* 从第1行开始，跨越2行 */
}

.ChatBox {
  grid-column: 2;
  grid-row: 1; /* 仅占据第1行 */
}

.InfoTable {
  grid-column: 1;
  grid-row: 3; /* 仅占据第3行 */
}

.GameCommands {
  grid-column: 2;
  grid-row: 2 / span 2; /* 从第2行开始，跨越2行 */
}

HTML 部分（结构无需修改）

<div class="gameScreen">
  <GameTable seats={seats} />
  <ChatBox socket={socket} username={username} />
  <InfoTable numPlayers={numPlayers} seats={seats} timer={false}/>
  <GameCommands gameMasterSpeech={gameMasterSpeech}/>
</div>

最终布局效果 #

• GameTable：宽度3fr，高度4fr
• ChatBox：宽度2fr，高度3fr
• InfoTable：宽度3fr，高度1fr
• GameCommands：宽度2fr，高度2fr

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