如何创建保持固定宽高、带1px间距的正常布局网格？

我通过jQuery生成了一个10×10的网格，单元格设置了固定的宽高，但在布局时遇到了两个问题：

• 使用display: flex能让每行单元格并排，但屏幕宽度变化时单元格会被拉伸；
• 使用display: inline-block时，每行底部会出现莫名其妙的间距。

下面是我两种尝试的代码：

尝试1：使用display: flex（存在拉伸问题） #

JavaScript #

/* This code is easier than writing many lines of HTML code */
$(document).ready(() => {
  for (let i = 0; i < 10; i++) {
    const parent = $("<div></div>");
    parent.addClass("p");
    for (let j = 0; j < 10; j++) {
      const child = $("<div></div>");
      child.addClass("c");
      parent.append(child);
    }
    $("#page").append(parent);
  }
});

CSS #

.p {
  display: flex;
  margin-top: 1px;
}
.c {
  width: 30px;
  height: 30px;
  margin-left: 1px;
  background: red;
}

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page"></div>

尝试2：使用display: inline-block（存在底部间距问题） #

JavaScript #

$(document).ready(() => {
  for (let i = 0; i < 10; i++) {
    const parent = $("<div></div>");
    parent.addClass("p");
    for (let j = 0; j < 10; j++) {
      const child = $("<div></div>");
      child.addClass("c");
      parent.append(child);
    }
    $("#page").append(parent);
  }
});

CSS #

.p {
  margin-top: 1px;
}
.c {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-left: 1px;
  background: red;
}

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page"></div>

解决方案 #

方案1：修复flex布局的拉伸问题 #

flex布局下单元格被拉伸，核心原因是默认flex-shrink: 1（空间不足时会自动缩小元素）。只需要给单元格添加flex-shrink: 0禁止压缩，再配合可选的flex-wrap: nowrap强制一行显示，就能固定单元格尺寸：

.p {
  display: flex;
  margin-top: 1px;
  flex-wrap: nowrap; /* 可选：强制一行显示所有单元格 */
  align-items: flex-start;
}
.c {
  width: 30px;
  height: 30px;
  margin-left: 1px;
  background: red;
  flex-shrink: 0; /* 关键：禁止单元格被压缩 */
}

方案2：修复inline-block的底部间距问题 #

inline-block元素底部的间距是默认vertical-align: baseline对齐方式导致的，修改垂直对齐方式即可解决：

.p {
  margin-top: 1px;
}
.c {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-left: 1px;
  background: red;
  vertical-align: top; /* 关键：修改垂直对齐方式 */
}

额外方案：用CSS Grid实现（更简洁） #

如果想更高效地实现网格布局，推荐使用CSS Grid，它能直接通过属性控制间距和行列，代码更简洁：

#page {
  display: grid;
  grid-template-columns: repeat(10, 30px);
  grid-template-rows: repeat(10, 30px);
  gap: 1px; /* 直接设置网格间距，替代margin */
}
.c {
  background: red;
}

这种方式不需要给每行父元素设置样式，单元格自动保持固定宽高，也不会出现拉伸或间距问题。

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