CSS Grid样式被划掉导致4×4网格布局失效，求助排查原因

算力阿峰

2026-4-29

问题解答

一、你的Grid样式被划掉的核心原因

直接说结论：你的grid-template-columns语法写错了！

在CSS Grid中，列宽的取值之间需要用空格分隔，而不是逗号。你写的：

grid-template-columns: 25%, 25%, 25%, 25%;

浏览器无法识别这种错误语法，所以会直接忽略这条规则，导致Grid布局退化成默认的单列布局——这就是为什么16个方块会纵向排列，且样式面板里这条规则被划掉。

修正后的写法有几种选择，推荐用最灵活的：

/* 写法1：空格分隔百分比 */
grid-template-columns: 25% 25% 25% 25%;

/* 写法2：用repeat简化代码 */
grid-template-columns: repeat(4, 25%);

/* 写法3：用fr单位（推荐，自动平分容器宽度） */
grid-template-columns: repeat(4, 1fr);

二、JavaScript动态创建元素会不会影响Grid布局？

完全不会！ 只要你把动态创建的元素正确添加到了Grid容器（#container）中，Grid布局会自动识别这些子元素并应用布局规则。

不过你的JS代码有个小瑕疵：你给每个方块都设置了相同的id="block"，但HTML规定id必须是唯一的。多个元素共用同一个id会导致后续的DOM查询（比如getElementById）只能找到第一个元素，建议去掉id设置，或者改成动态唯一id：

let x = 0;
do{
  const square = document.createElement("div");
  square.className = "squares";
  // 改成动态唯一id，或者直接去掉这行
  square.setAttribute("id", `block-${x}`);
  document.getElementById("container").appendChild(square);
  x++;
} while(x < 16);