嘿，我明白你的困扰——明明给Grid容器设了宽度/最大宽度，结果要么容器还是撑满全屏，要么内容直接溢出，确实挺让人头疼的。咱们来拆解问题，一步步解决：

核心问题根源 #

CSS Grid的默认布局逻辑是：容器会根据子项的列设置来计算自身宽度，如果你的列总宽度超过了设置的max-width，容器就会被“撑爆”，导致内容溢出。另外，如果子项设置了固定宽度或者无法收缩的属性，也会让容器宽度失控。

具体解决方案 #

这里给你两个关键调整点，结合起来就能解决问题：

1. 给容器设置正确的宽度约束+居中
   用max-width: 700px替代固定width，这样在屏幕宽度小于700px时容器能自动收缩；再加上margin: 0 auto让容器居中，提升视觉效果。

2. 调整Grid列布局为响应式
   把grid-template-columns改成repeat(auto-fit, minmax(180px, 1fr))，这个设置的意思是：

   • auto-fit：自动适配容器宽度，多余的列会自动换行
   • minmax(180px, 1fr)：每列最小宽度180px，最大占满剩余空间，保证子项不会过窄也不会撑爆容器

修改后的核心代码示例 #

/* Grid容器样式 */
.grid-container {
  display: grid;
  max-width: 700px; /* 限制最大宽度为700px */
  margin: 0 auto; /* 水平居中容器 */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 响应式列布局 */
  gap: 1.2rem; /* 子项之间的间距，比用margin更简洁 */
  padding: 0 1rem; /* 给小屏幕留左右内边距，避免内容贴边 */
}

/* Grid子项样式 */
.grid-item {
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-radius: 4px;
  /* 移除固定宽度，让Grid自动分配空间 */
}

额外注意事项 #

• 如果你之前给子项设置了min-width或者固定width，一定要去掉或者调整成相对值，否则子项无法收缩，还是会导致溢出。
• 不要给容器加width: 100%，这会覆盖max-width的限制，让容器重新撑满全屏。

这样调整后，你的Grid容器就会乖乖限制在700px左右，内容也会自动换行不会溢出啦～

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