如何用 CSS Grid 实现内容驱动的垂直自适应分栏布局-html教程-PHP中文网

如何用 CSS Grid 实现内容驱动的垂直自适应分栏布局

本文介绍如何利用 css grid 的天然流式行为，实现两个垂直排列区域（如上下两栏）根据各自内容高度自动伸缩，同时限制单栏最大高度不超过容器的 50%，无需 javascript 即可达成响应式、内容感知的高度分配。

本文介绍如何利用 css grid 的天然流式行为，实现两个垂直排列区域（如上下两栏）根据各自内容高度自动伸缩，同时限制单栏最大高度不超过容器的 50%，无需 javascript 即可达成响应式、内容感知的高度分配。

在传统 Flexbox 布局中，flex: 1 会强制均分剩余空间，难以实现“内容少则收缩、内容多则撑开”的自然行为——尤其当需兼顾上限约束（如单栏 ≤50% 容器高度）时，Flexbox 往往需要复杂技巧或牺牲语义性。

而 CSS Grid 提供了更简洁、更符合直觉的解决方案：默认情况下，Grid 行（grid rows）会基于子元素内容自动计算基准尺寸；配合 overflow: auto 和显式容器高度，即可天然实现「按需伸缩 + 溢出滚动」的双重效果。

✅ 正确实现方式（推荐）

只需将容器设为 display: grid，并省略显式行定义（即不写 grid-template-rows），浏览器会自动创建两条隐式行轨道，每行依据自身内容高度自适应，并在总高度超限时触发滚动：

.container {
  display: grid;
  height: 300px; /* 固定容器高度 */
}

.topDiv,
.bottomDiv {
  overflow: auto; /* 关键：启用滚动，防止溢出破坏布局 */
}

.topDiv {
  background-color: blue;
  color: white;
}

.bottomDiv {
  background-color: green;
  color: white;
}

? 原理说明：Grid 默认使用 grid-auto-rows: auto，意味着每行高度由内容决定；当两列内容总高度 ≤ 300px 时，它们紧密贴合内容；当任一列内容增长，它会优先占据更多空间，但因未设置 minmax() 或固定比例，另一列会自动压缩——只要不小于其最小内容高度（min-content）。更重要的是，当任一列内容高度超过 150px（即 50% 容器高），它不会无限扩张，而是通过 overflow: auto 启用滚动条，从而天然满足「单栏不超过 50%」的约束。

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

? 实际效果验证

上栏内容多、下栏内容少 → 上栏变高（带滚动），下栏收缩至刚好包裹少量文本；
下栏内容多、上栏内容少 → 下栏变高（带滚动），上栏收缩；
两栏内容都极多 → 每栏最多显示约 150px 高度（取决于字体行高与 padding），超出部分可滚动，严格守住 50% 上限。

⚠️ 注意事项与优化建议

勿添加 grid-template-rows: 1fr 1fr：这会退化为类似 Flexbox 的均分行为，失去自适应能力；
避免设置 min-height 或 height 在子项上：会干扰 Grid 的自动尺寸计算；
若需更强控制（如最小高度保障），可升级为：
```
.container {
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr);
  height: 300px;
}
```
此写法明确限定每行最小为内容高度、最大为可用空间的一半（1fr 在双行场景下等价于 50%），进一步强化“收缩-伸展-截断”逻辑；
兼容性：CSS Grid Level 1（display: grid）已获所有现代浏览器支持（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+），生产环境可放心使用。