React无法渲染响应式CSS Grid布局的问题求助

问题复现 #

纯HTML中使用Grid布局可实现随屏幕伸缩的8x8棋盘，保持方块1:1比例且无列间距，但在React组件中渲染时，方块不缩放、列间出现空隙，网格横向拉伸。

解决方案 #

调整CSS样式，同时优化React组件代码：

1. 全局样式重置（添加到board.css或全局样式文件）：

body {
  margin: 0;
  padding: 0;
}

#root {
  width: 100%;
}

2. 棋盘核心样式调整：

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 100%;
  max-width: 100vh; /* 保持棋盘为正方形，避免宽屏拉伸 */
  margin: 0 auto; /* 居中显示 */
  background: #e1e1e1;
  gap: 0; /* 强制消除网格间距 */
}

.square {
  border: solid black 1px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box; /* 边框包含在方块尺寸内，防止撑开网格 */
}

3. 简化React组件代码（可选，避免重复写64个div）：

import "./board.css";

export default function Board() {
  // 生成64个方块的数组
  const squares = Array.from({ length: 64 });

  return (
    <div className="wrapper">
      {squares.map((_, idx) => (
        <div key={idx} className="square"></div>
      ))}
    </div>
  );
}

问题原因 #

1. 默认样式干扰：多数React初始化模板（如Create React App）会给body添加默认margin，且#root容器未设置width: 100%，导致.wrapper的width: 100%无法相对于视口生效。
2. 边框尺寸溢出：方块的边框默认会增加元素总尺寸，撑开Grid列宽，导致列间出现空隙，box-sizing: border-box可解决此问题。
3. 网格间距隐式设置：部分全局样式可能会给Grid容器添加默认gap值，显式设置gap: 0可确保无间距。

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