Grid容器与内部元素间存在空白问题排查求助

运行下方代码后，Grid容器边框和内部方块边框之间会出现空白，全屏状态下侧边也会有这个问题：

原代码 #

CSS #

.board {
  display: grid;
  border: 1px solid black;
  flex: 1;
  grid-template-columns: repeat(2,1fr);
  height: 500px;
  box-sizing: border-box;
}

.square {
    border: 1px solid black;
    height: auto;
}

.boards-container {
    display: flex;
    gap: 16px;
    padding: 16px;
}

HTML #

<div class="boards-container">
  <div class="board p-board"> 
        <div id="0-0" class="square"></div>
        <div id="0-1" class="square"></div>
        <div id="1-0" class="square"></div>
        <div id="1-1" class="square"></div>
            
   </div>
        
 <div class="board c-board">
        <div id="0-0" class="square"></div>
        <div id="0-1" class="square"></div>
        <div id="1-0" class="square"></div>
        <div id="1-1" class="square"></div>

</div>
</div>

问题截图 #

原因及解决方法 #

成因 #

• 仅为Grid容器设置了列模板，未设置行模板，行高默认由内容决定（方块为空时无法自动填满容器高度）
• .square未设置box-sizing: border-box，边框会占据额外空间，导致元素无法完全贴合容器内部
• 容器宽度分配后，方块的边框未纳入尺寸计算，导致侧边出现间隙

修复后的代码 #

修改后即可消除空白：

.board {
  display: grid;
  border: 1px solid black;
  flex: 1;
  grid-template-columns: repeat(2,1fr);
  /* 添加行模板，让两行平分容器高度 */
  grid-template-rows: repeat(2, 1fr);
  height: 500px;
  box-sizing: border-box;
}

.square {
    border: 1px solid black;
    height: auto;
    /* 让边框纳入元素尺寸计算 */
    box-sizing: border-box;
}

.boards-container {
    display: flex;
    gap: 16px;
    padding: 16px;
}

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