如何实现自适应宽度的正方形像素网格（与行列数无关）

不用依赖固定行列数，也不用Grid布局，用Flex就能搞定正方形像素的自适应适配，核心是利用百分比padding来让高度匹配宽度，具体代码和思路如下：

核心思路 #

Flex布局负责自动分配列数和换行，而正方形的实现靠padding-top: 100%——因为CSS里百分比padding是基于元素的宽度计算的，所以这个值能让元素高度和宽度完全相等，完美撑出正方形。

完整代码示例 #

HTML结构

<div class="pixel-grid">
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <!-- 这里可以放任意数量的pixel元素 -->
</div>

CSS样式

.pixel-grid {
  max-width: 800px; /* 最大宽度限制 */
  margin: 0 auto; /* 让网格在页面居中 */
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 1px; /* 像素之间的间隙，不需要就设为0 */
}

.pixel {
  flex: 1 0 auto; /* 让每个像素均分可用宽度，不被压缩 */
  position: relative;
  padding-top: 100%; /* 核心：用padding撑起正方形高度 */
  background-color: #eee; /* 示例背景色，可自定义 */
}

/* 如果需要在像素内添加内容，可加这个样式 */
.pixel .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 可选：内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

关键细节说明 #

1. flex: 1 0 auto：确保每个像素在当前行里自动分配剩余宽度，不会因为内容（如果有的话）被压缩，同时当行空间不够时自动换行。
2. padding-top: 100%：这是实现正方形的核心，替代了固定height，完全适配Flex分配的宽度。
3. 容器设置：max-width限制网格最大宽度，margin:auto让网格在页面水平居中，当像素数量过多时，页面会自动出现垂直滚动条，符合需求。

可选优化 #

• 若想限制像素的最小尺寸（避免过窄），可以给.pixel加min-width: 20px（数值自定义），这样当容器宽度缩小到一定程度，像素会优先换行而不是继续缩小。
• 如需修改像素间距，直接调整.pixel-grid的gap值即可。

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