Grid栅格布局中子项高度不一致怎么办？

设计师亚美提问于 2026-02-24 12:49:20 阅读 25

组件

我在用CSS Grid做商品列表布局，希望每行3列、自动换行，但每个商品卡片内容高度不同，导致网格行高被撑开，下面的项出现大片空白。试过设置grid-auto-rows: 1fr也没用，是不是哪里写错了？

这是我的CSS代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  grid-auto-rows: 1fr;
}
.item {
  background: #f0f0f0;
  padding: 12px;
}

Grid栅格布局组件

我来解答赞 7 收藏

反馈

1 条解答

迷人的艺童 Lv1

你这个写法的问题在于 grid-auto-rows: 1fr 会让所有隐式生成的行都等高，但你的 item 又没有强制拉伸，导致内容高的撑高整行，下面的 item 就空一大片。

解决办法是让每个 item 强制填满所在格子的高度，用 align-self: stretch：

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
grid-auto-rows: 100px; / 明确指定行高，比如 100px，或者用 minmax(100px, auto) /
}

.item {
background: #f0f0f0;
padding: 12px;
align-self: stretch;
box-sizing: border-box;
}

不过这样还是内容少的会留白。如果你想要「瀑布流」那种紧凑效果，Grid 其实不太合适，得用 masonry 布局（目前 Chrome 121+ 支持 grid-template-rows: masonry，但兼容性还差），或者退而求其次用 flex + 多列包裹 + JS 计算高度，或者直接上 CSS columns：

.grid-container {
column-count: 3;
column-gap: 16px;
}

.item {
break-inside: avoid;
margin-bottom: 16px;
background: #f0f0f0;
padding: 12px;
}

这个方案在主流浏览器都稳，内容少的卡片不会留白，就是横向对齐没 Grid 精确，但视觉上更紧凑。

代码给你，自己选吧。

2026-02-24 13:00