Grid容器元素溢出问题：设width:100%仍出现滚动条

问题原因 #

你遇到的滚动条在922px提前出现的问题，核心有两点：

1. Grid列的最小宽度默认由内容决定：使用repeat(4, 1fr)定义列宽时，每列的最小宽度默认是min-content（即列内元素的最小宽度，这里是图片的200px）。当容器宽度不足以容纳4×200px + 3×2rem的总宽度时，Grid不会自动收缩列宽，而是强制保持列的最小宽度，导致容器溢出。
2. 浏览器默认边距的影响：你计算的908px是理想总宽度，但浏览器的body元素默认有8px的外边距，实际容器的可用宽度是视口宽度 - 16px。当视口宽度为922px时，容器可用宽度为922-16=906px，刚好小于908px，因此触发了水平滚动条。

解决方案 #

可以通过以下几种方式解决：

• 让Grid列支持收缩：将Grid列定义改为repeat(4, minmax(0, 1fr))，强制列的最小宽度为0，使其能根据容器宽度自动收缩：

  .content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: 'section1 section2 section3 section4';
    gap: 2rem;
  }
  

• 让图片自适应列宽：如果希望图片随列宽缩放，而非固定200px，修改图片样式使其占满列宽并保持比例：

  section img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* 维持圆形比例 */
    border-radius: 100%;
  }
  

• 清除默认边距（可选）：重置body的默认边距，消除其对布局的影响：

  body {
    margin: 0;
  }
  

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