通过 CSS Flexbox 或 Grid 布局结合动态计算子元素尺寸，可确保所有子 div 严格限制在父容器内、无溢出，并随网格数量变化自动缩放。关键在于放弃固定宽高，改用百分比或 flex 分配 + box-sizing: border-box。
通过 css flexbox 或 grid 布局结合动态计算子元素尺寸，可确保所有子 div 严格限制在父容器内、无溢出，并随网格数量变化自动缩放。关键在于放弃固定宽高，改用百分比或 `flex` 分配 + `box-sizing: border-box`。
在 Etch-a-Sketch 这类动态网格项目中，直接为每个子 div 设置固定宽高（如 width: 10px; height: 10px）会导致布局失控：当用户输入较大网格数（如 64×64）时，总宽度远超父容器，触发水平滚动或内容溢出；而固定父容器宽高（如 370px）又无法适配不同屏幕或网格密度。
✅ 推荐方案：CSS Grid + 动态尺寸计算
这是最简洁、响应式最强的解法——无需手动创建行容器，仅用一行 CSS 即可实现完美网格布局：
#container {
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
gap: 1px; /* 替代 margin，避免盒模型干扰 */
width: 100%;
max-width: 600px; /* 可选：限制最大宽度 */
aspect-ratio: 1 / 1; /* 保持正方形区域 */
background-color: #eee;
padding: 2px; /* 防止最外层 gap 被裁剪 */
box-sizing: border-box;
}
.grid-cell {
background-color: black;
transition: background-color 0.1s;
}
.grid-cell:hover {
background-color: red;
}
对应 JavaScript 需同步更新：
const container = document.getElementById('container');
const squaresPerSide = Math.min(100, Math.max(2, parseInt(prompt('请输入每边格子数（2–100）：') || '16')));
// 设置 CSS 变量驱动 Grid 列数
container.style.setProperty('--cols', squaresPerSide);
// 批量创建子元素（更高效）
for (let i = 0; i {
if (e.target.classList.contains('grid-cell')) {
e.target.style.backgroundColor = 'red';
}
});
⚠️ 关键注意事项：
- 禁用 margin 改用 gap：margin 会破坏 1fr 分配逻辑，且在 flex-wrap 下易导致换行错位；gap 是 Grid/Flex 的原生间距控制属性，不参与尺寸计算。
- box-sizing: border-box 必须启用：确保 padding 和 border 不增加元素实际宽高。
- 避免内联样式：用 class 控制样式，便于维护与主题切换；内联样式（如 setAttribute('style', ...)）会覆盖 CSS 变量和媒体查询。
- 性能优化：对数百个格子使用事件委托（container.addEventListener），而非为每个格子绑定独立 mouseover，显著减少内存占用与事件处理器数量。
? 进阶提示：若需支持响应式网格（如移动端自动降级为 8×8），可结合 @container 查询或 resize 监听器动态重绘，但对初学者而言，上述 Grid 方案已兼顾简洁性、可维护性与专业度。
