网格容器.card内子项无法水平自适应，求代码问题排查及解决

核心问题 #

你的.card容器因父级.container的布局设置，宽度被内容限制无法触发max-width:500px；缩小时子元素内容溢出，是因为.card未占满可用水平空间，子元素的width:100%无法正确适配。

代码问题点 #

1. .container的place-items:center限制：这个属性同时设置了垂直和水平居中，导致.card的宽度仅由自身内容决定，不会拉伸填充容器的可用空间，使得max-width:500px无法生效，始终停留在内容最小宽度（约320px）。
2. .card缺少自适应宽度设置：仅设置max-width:500px，未添加width:100%，导致屏幕宽度小于500px时，.card无法占满可用空间，子元素内容会超出容器范围。

修复方案 #

修改.card的CSS，添加宽度自适应和边距：

.card {
  display: grid;
  gap: 1rem;
  max-width: 500px;
  width: 100%; /* 让.card占满父容器可用宽度 */
  margin: 0 1rem; /* 避免小屏幕下内容贴边 */
}

如果不想修改.card，也可以调整.container的布局逻辑：

.container {
  min-height: 100vh;
  display: grid;
  align-items: center; /* 仅保持垂直居中 */
  justify-items: stretch; /* 让子元素水平拉伸 */
  padding: 1rem;
}

.card {
  display: grid;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto; /* 手动水平居中 */
}

解释 #

• 添加width:100%后，.card会优先占满父容器的水平空间，同时被max-width:500px限制：屏幕宽度大于500px时保持500px宽度并居中；屏幕小于500px时占满屏幕宽度。
• 边距/内边距的设置是为了避免小屏幕下内容紧贴屏幕边缘，提升视觉体验。
• 子元素的width:100%会基于.card的宽度计算，配合全局的box-sizing:border-box，内部padding不会导致宽度溢出。

完整修复后核心CSS片段 #

/* 原有基础样式保持不变 */

.card {
  display: grid;
  gap: 1rem;
  max-width: 500px;
  width: 100%;
  margin: 0 1rem;
}

.container {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem 0;
}

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