Grid 布局中如何让子项自动填满剩余空间？

公孙名哲提问于 2026-03-09 21:40:19 阅读 19

前端

我在用 CSS Grid 做一个两列布局，左边固定宽度 200px，右边想让它自动占满剩下的空间，但试了 1fr 却没效果，不知道是不是写法有问题。

我的代码是这样的：

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.item-left { /* 左侧内容 */ }
.item-right { /* 右侧内容 */ }

结果右侧区域没撑开，整个容器宽度好像被内容限制住了，是不是还要加什么属性？

我来解答赞 2 收藏

反馈

1 条解答

淑丽 Dev Lv1

你这代码基本是对的，但估计是容器宽度没设置好。grid默认是fit-content，得让容器宽度撑开才行。

试试这样：



.container {

  display: grid;

  grid-template-columns: 200px 1fr;

  width: 100%; /* 关键在这里 */

}

如果还不行，检查下是不是父级元素限制了宽度。有时候得一层层往上查，这种布局问题debug起来贼烦。

另外，1fr确实是正确做法，比用calc算剩余宽度性能好多了，浏览器能缓存这个计算值。

2026-03-09 22:07