如何实现5×10的Div均匀布局？解决间距叠加与排列异常问题

方法一：CSS Grid（推荐） #

Grid天生适配行列固定的布局场景，gap属性可直接设置盒子间的间距，不会出现间距叠加问题，同时能强制一行显示5个盒子。

1. 容器样式：

.container {
  display: grid;
  /* 强制一行5列，每列宽度自适应容器 */
  grid-template-columns: repeat(5, 1fr); 
  /* 设置水平+垂直方向的统一间距，也可单独用column-gap/row-gap设置 */
  gap: 3px; 
  /* 可选：若需固定容器宽度，确保能容纳5个盒子+总间距即可 */
  /* width: 500px; */
}

2. 小盒子样式：

.box {
  /* 可选：给盒子设置固定高度，宽度由Grid列自动分配 */
  height: 40px;
  background-color: #eee;
}

容器内会自动按5列排列，超出的盒子自动换行，只需放入50个.box元素就能实现5×10的布局。gap:3px会让盒子间的水平、垂直间距均为3px，完全避免相邻间距叠加的问题。

方法二：Flexbox #

Flex也能实现需求，核心是通过计算盒子宽度强制一行5个，同时用gap规避间距叠加：

1. 容器样式：

.container {
  display: flex;
  flex-wrap: wrap;
  /* 设置盒子间的间距，不会出现叠加 */
  gap: 3px;
  /* 可选：固定容器宽度，或让盒子自适应父容器 */
  /* width: 500px; */
}

2. 小盒子样式：

.box {
  /* 精确计算每个盒子的宽度：(容器总宽度 - 4个间距)/5 */
  width: calc((100% - 4*3px)/5);
  height: 40px;
  background-color: #eee;
}

通过calc计算宽度，能确保一行正好放下5个盒子；gap:3px直接由容器控制间距，无需担心相邻盒子margin/padding叠加的问题。也可替换为flex: 0 0 calc(20% - 2.4px)，其中2.4px是总间距（4×3px）平分到每个盒子的宽度扣除值。

关键说明 #

• 之前margin/padding间距叠加的原因：相邻盒子的水平margin会直接相加（比如左盒margin-right:3px+右盒margin-left:3px，中间间距变成6px），而gap是容器层面控制的间距，不存在这个问题。
• 强制一行5个的核心：Grid通过grid-template-columns直接定义列数；Flex通过精确计算盒子宽度限制每行数量。

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