如何防止CSS Grid列内换行？制作Google首页时footer出现列换行问题

• 你设置的列规则repeat(auto-fit, minmax(50px,1fr)给每列只留了50px的最小宽度，像“Comment fonctionne la recherche Google ?”这类长文本本身宽度远大于50px，列空间不够时，浏览器就会自动把文字拆成几行塞在列里，也就是你看到的异常换行。
• auto-fit会根据容器宽度自动调整列的数量，但你写死了9个固定的grid布局区域，两者逻辑不匹配，进一步打乱了每列的实际宽度。
• 没有给导航链接设置禁止换行的规则，浏览器默认会在窄列空间里折断文字适配列宽。

完整调整后的CSS代码 #

#footer{
    display: grid;
    /* 替换原来的auto-fit列规则 */
    grid-template-columns: repeat(9, minmax(auto, 1fr));
    grid-template-rows: 50px;
    grid-template-areas: 
        "pub entreprise propos comment neutre infos confidentialite conditions parametres";
    background-color: rgb(242, 242, 242);
    padding: 0 20px;
    align-items: center;
    column-gap: 12px;
}
#footer a {
    white-space: nowrap;
    color: #202124;
    font-size: 14px;
    text-decoration: none;
}

改动核心逻辑 #

• 把列宽规则从repeat(auto-fit, minmax(50px,1fr))换成repeat(9, minmax(auto, 1fr))：每列的最小宽度会自动匹配列内文字的最小不换行宽度，不会因为人为设的50px最小宽度挤压文字；剩下的容器宽度会自动平分给9列，保证列宽均匀。
• 给链接加white-space: nowrap：直接禁止文字在列内折行，如果容器宽度真的不够放下9个导航项，浏览器会直接把溢出的导航项移到下一行排布，不会出现单个链接拆成几行的问题。
• 补充的边距、对齐、间距设置，和真实Google首页的页脚视觉效果对齐。

如果要适配窄屏手机访问，可以新增媒体查询，在宽度不足时自动让导航项折成多行：

@media (max-width: 900px) {
  #footer {
    grid-template-columns: repeat(3, minmax(auto, 1fr));
    grid-template-rows: auto auto;
    row-gap: 8px;
    height: auto;
    padding: 12px 20px;
  }
}

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