Grid 布局中子项宽度不按预期缩放是怎么回事？

a'ゞ丽珍提问于 2026-03-02 19:44:21 阅读 2

组件

我用 CSS Grid 做一个三列布局，想让每列等宽并自动填满容器，但实际效果却出现了空白间隙，而且调整窗口大小时列宽也不自适应。明明设置了 grid-template-columns: repeat(3, 1fr)，为啥还是不对？

这是我的代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
.item {
  background: #eee;
  padding: 12px;
}

容器父级没设固定宽度，但子项就是不撑满，是我漏了什么设置吗？

布局组件

我来解答赞 3 收藏

反馈

1 条解答

百里艺馨 Lv1

看了你的代码，语法没问题。大概率是子项的 min-width: auto 在作怪，Grid 子项默认有最小宽度，内容太长就会撑开导致溢出。给 .item 加上 min-width: 0 就好了：

.item {

  background: #eee;

  padding: 12px;

  min-width: 0;

}

如果还有问题，检查一下子项里面是不是有长单词或者 URL 没换行，顺便加个 overflow: hidden 或者 word-break: break-all。应该能用。

2026-03-02 20:14