在使用 CSS Grid 实现 Etch-a-Sketch 动态网格时，多次点击“设置网格大小”按钮后底部出现黑色空白，本质是旧网格单元未被清除导致的视觉重叠；根本解法是每次重建前清空容器，并改用 100% 自适应尺寸替代硬编码宽高计算。
在使用 css grid 实现 etch-a-sketch 动态网格时，多次点击“设置网格大小”按钮后底部出现黑色空白，本质是旧网格单元未被清除导致的视觉重叠；根本解法是每次重建前清空容器，并改用 `100%` 自适应尺寸替代硬编码宽高计算。
该问题并非由 1fr 单位本身引起，而是逻辑层的 DOM 管理疏漏所致。观察原始代码可发现：每次调用 createGrid() 都会向 .grid 容器中追加新
元素，但从未移除先前生成的单元格。当用户第二次设置网格（如从 16×16 改为 32×32）时，旧的 256 个单元格仍保留在 DOM 中，而新的 1024 个单元格被叠加其上——由于 .cell 具有 border: 1px solid black，大量重叠的细边框在视觉上聚合成一片“黑色底部空白”，实为历史残留元素的边框堆叠效果。
✅ 正确做法是在 createGrid() 开头清空容器：
function createGrid(size) {
grid.innerHTML = ""; // ✅ 关键修复：彻底清空所有子元素
for (let i = 0; i <p>⚠️ 注意事项：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/2209" title="PhotoG"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680099936492.png" alt="PhotoG" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/2209" title="PhotoG" class="overflowclass">PhotoG</a>
<p class="overflowclass">一款AI图像与设计工具，主要用于PhotoG是全球首个内容营销端对端智能体，适合需要提升相关任务效率的用户。</p>
</div>
<a rel="nofollow" href="/ai/2209" title="PhotoG" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 不要依赖 grid.style.width/height：该值在未显式设置内联样式时为空字符串，parseInt("") 返回 NaN，导致尺寸计算失败；
- 1fr + 100% 是黄金组合：gridTemplateRows/Cols 定义轨道分配后，每个网格项只需设 width: 100%; height: 100% 即可完美填充对应轨道，无需手动像素计算；
- 事件监听器可且应复用：将 setRandomColor 定义为独立函数（而非箭头函数内联），既避免闭包冗余，又符合事件委托最佳实践；
- 补充健壮性（推荐）：在 setGridSize() 中加入输入校验，防止非数字或非法尺寸（如 ≤0、过大）导致布局异常：
function setGridSize() {
const input = prompt("Enter how many rows/columns you'd like (2–100):");
const size = parseInt(input, 10);
if (isNaN(size) || size 100) {
alert("Please enter a valid number between 2 and 100.");
return;
}
gridSize = size;
grid.style.gridTemplateRows = `repeat(${size}, 1fr)`;
grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
createGrid(size);
}
最终效果：无论用户反复调整多少次网格尺寸，.grid 始终仅包含当前规格的纯净单元格，黑色空白彻底消失，响应式网格行为稳定可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
