如何用CSS实现元素动态分布，适配不同屏幕尺寸的容器？

核心解决方案 #

放弃手动写固定列数的容器，改用Grid的auto-fit和minmax属性，让浏览器自动判断每行能容纳的元素数量，同时保证元素不会过小，还能自动分配间距，彻底解决小屏幕溢出问题。

替换后的代码 #

删掉你原来的.container3和.container2，只用一个通用容器类即可：

.container {
    display: grid;
    /* 自动适配列数：元素最小宽度200px，最大占满剩余空间 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5rem; /* 保持你需要的元素间距，同时自动处理行/列间距 */
    justify-content: center; /* 确保元素在容器内居中显示 */
    width: 100%; /* 让容器占满父元素可用宽度，避免MediaWiki默认样式限制 */
    margin: 0 auto; /* 让容器本身在页面中居中 */
    max-width: 1400px; /* 可选：限制容器最大宽度，避免大屏幕下元素过宽 */
}

之后把HTML里的class="container3"或class="container2"统一改成class="container"就行。

代码逐行解释 #

• repeat(auto-fit, minmax(200px, 1fr))：
  • auto-fit：浏览器自动计算当前屏幕宽度下，能放下几个符合尺寸要求的元素，自动换行调整列数；
  • minmax(200px, 1fr)：每个元素最小宽度为200px（你可以根据自己的元素大小调整这个值），如果有多余空间，元素会自动拉长占满对应等分的剩余空间（1fr是网格布局的单位，代表剩余空间的一份）。
• gap:5rem：替代原来的grid-gap，同时控制行间距和列间距，语法更简洁。
• width:100%：适配MediaWiki的内容容器，避免自带样式限制容器宽度导致元素挤压。

MediaWiki适配注意事项 #

MediaWiki自带全局样式，可能会影响自定义CSS的生效，解决方法：

• 给容器加更具体的选择器提升优先级，比如#mw-content-text .container；
• 若元素仍被挤压，给容器添加box-sizing: border-box;，确保padding不会让容器超出父元素范围。

原来方法溢出的原因 #

你之前固定3列/2列加5rem间距，小屏幕下元素宽度+间距的总和会超过容器宽度，浏览器无法自动缩小元素，就会出现溢出。用auto-fit+minmax后，浏览器会自动减少列数（比如小屏幕下变成1列），同时保证元素不会过小，完美适配各种屏幕尺寸。

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