如何无需@media规则实现元素列表居中且自适应同行显示？

你目前通过媒体查询控制容器宽度的方式虽然能实现需求，但确实不够灵活——要适配任意页面宽度，同时保证元素尺寸不变、每行尽可能容纳更多元素且整体居中，我们可以用CSS Flexbox或Grid的原生特性来实现，完全不用写一堆@media规则，代码更简洁且适配性更强。

方案一：改进版Flexbox布局 #

我们可以去掉固定宽度的媒体查询，利用Flexbox的自适应特性来实现：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 让每行元素居中，容器不满行时也保持居中 */
  max-width: 100%; /* 容器不超出视口宽度 */
  margin: 0 auto; /* 整个容器在页面水平居中 */
  gap: 24px 4px; /* 垂直间隙24px（对应你原来的margin-bottom），水平间隙4px（对应左右margin总和） */
}

.rectangle {
  width: 286px;
  height: 180px;
  background: #aeaeae;
  /* 去掉原来的左右margin，用gap统一控制间距更整洁 */
}

原理说明：

• Flexbox会自动根据容器宽度计算每行能容纳多少个286px的元素（加上水平间隙），超出时自动换行；
• justify-content: center确保每行的元素在容器内居中，即使最后一行元素数量不足也不会左对齐；
• max-width: 100%保证容器不会超出视口，配合margin: 0 auto实现整体居中。

方案二：CSS Grid布局（更简洁的网格方案） #

Grid布局天生适合这种规整的列表场景，代码逻辑更直观：

.container {
  display: grid;
  /* 核心：自动适配列数，每列最小宽度286px，尽可能多列 */
  grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
  justify-items: center; /* 每个元素在网格单元格内居中 */
  max-width: 100%;
  margin: 0 auto;
  gap: 24px 4px; /* 统一控制垂直/水平间隙 */
  padding: 0 2px; /* 可选：让最边缘的元素和页面左右保持2px间距，和你原来的布局一致 */
}

.rectangle {
  width: 286px;
  height: 180px;
  background: #aeaeae;
}

原理说明：

• repeat(auto-fit, minmax(286px, 1fr))是关键：它会自动计算容器宽度能容纳多少个286px的列，自动调整列数，空间不足时自动换行；
• justify-items: center确保每个元素在单元格内居中，避免元素因网格列宽拉伸而偏移；
• 同样通过margin: 0 auto实现容器整体居中，完全适配任意屏幕宽度。

两种方案对比 #

• Flexbox方案更贴近你原来的代码写法，迁移成本低；
• Grid方案代码更简洁，布局逻辑更清晰，适合规整的网格类列表。

不管用哪种方案，都能摆脱媒体查询的束缚，实现真正的自适应布局，同时满足你“不调整元素尺寸、居中显示、每行尽可能多元素”的需求。

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