auto-fit网格中某网格项占2列跨度时如何让后续项自动换行占满整行

问题根因 #

你遇到的问题本质是Grid自动列数和元素跨列规则不匹配：

• 视口宽度在600px~900px区间时，repeat(auto-fit, minmax(300px, 1fr))会生成2列，Logo设置span 2占满第一行，Contact默认仅占1列，导致第二行留空，不会自动占满
• 视口宽度小于600px时，auto-fit仅生成1列，此时Logo的span 2会隐式生成第二列，反而出现横向溢出

修复方案 #

仅需要修改两处CSS规则即可，完全不用媒体查询和Flexbox：

const LogoContact = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  grid-template-rows: 150px;
`;

const Logo = styled.div`
  background-color: #a85218;
  grid-column: span min(2, auto);
  color: white;
`;

const Contact = styled.div`
  background-color: #d0507e;
  color: white;
  /* 新增：让元素占满当前行所有可用列 */
  grid-column-end: -1;
`;

规则说明 #

• grid-column-end: -1 表示让Contact的右边缘对齐网格的最后一根列线，不管当前行有多少列，都会自动占满整行，不会留空白
• 父容器的min(300px, 100%)保证列宽度不会超过容器宽度，避免小屏下列宽度溢出
• Logo的span min(2, auto) 保证当网格列数不足2时，最多只跨1列，不会隐式生成多余列导致溢出

如果你的布局不需要支持3列以上的展示，还可以给LogoContact加一行max-width: 900px; margin: 0 auto;限制最大宽度，避免大屏下列数过多导致布局失衡。

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