如何让div方块均匀分两行排列并适配视口宽度？

用CSS Grid布局就能轻松解决你的问题，不需要繁琐的flex属性调整，完美满足「两行均匀分布、元素间留间隙、适配视口宽度」的需求。

修改后的完整CSS代码： #

.number-of-round {
  display: grid;
  /* 固定两行，每行高度自适应 */
  grid-template-rows: repeat(2, 1fr);
  /* 自动适配列数，最小宽度取60px（原max-width）和每行6个元素时的可用宽度（减去间隙）的较小值 */
  grid-template-columns: repeat(auto-fit, minmax(min(60px, 100%/6 - 10px), 1fr));
  /* 元素间的间隙 */
  gap: 10px;
  padding: 0 10px; /* 可选：给容器左右加内边距，避免边缘元素贴视口 */
}

.square {
  position: relative;
  margin: 0;
  max-width: 60px;
  border: 1px dotted black;
  border-radius: 4px;
}
.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.square .content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
}
.flex-center {
  justify-content: center;
  align-items: center;
}

关键属性说明： #

• display: grid：启用Grid布局，天然适合这种行列规整的布局场景
• grid-template-rows: repeat(2, 1fr)：强制分为两行，每行高度根据内容自动分配
• grid-template-columns: repeat(auto-fit, minmax(min(60px, 100%/6 - 10px), 1fr))：
  • auto-fit：自动根据容器宽度调整列数，但因为总共有12个元素+固定两行，最终会稳定在每行6个
  • minmax(...)：限制每个正方形的最小宽度——要么是你设置的最大宽度60px，要么是容器宽度除以6（每行6个）减去间隙后的宽度，保证视口足够宽时元素不超过60px，视口变窄时自动缩小以填满每行
• gap: 10px：统一设置元素间的水平、垂直间隙，避免margin带来的外边距折叠问题

效果说明： #

设置后，12个正方形会始终保持两行排列，元素间有均匀间隙；视口宽度变化时，每个正方形会自动调整宽度（最大不超过60px），始终填满每行，不会出现收缩成团的情况。

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