如何用 CSS Grid 精确控制容器高度为 3 行（支持滚动）-html教程-PHP中文网

如何用 css grid 精确控制容器高度为 3 行（支持滚动）

本文详解如何在不硬编码像素值的前提下，让 CSS Grid 容器严格保持恰好 3 行高度，并在内容超出时启用垂直滚动；核心在于结合 aspect-ratio、grid-template-columns 与 calc() 动态计算容器高度。

本文详解如何在不硬编码像素值的前提下，让 CSS Grid 容器严格保持恰好 3 行高度，并在内容超出时启用垂直滚动；核心在于结合 `aspect-ratio`、`grid-template-columns` 与 `calc()` 动态计算容器高度。

CSS Grid 本身不具备“自动截断至 N 行”的布局能力——grid-template-rows: repeat(3, 1fr) 并不会限制容器总高度，它仅定义了 网格轨道数量，实际容器高度仍由子项内容或显式尺寸决定。要实现“固定 3 行高度 + 滚动”，必须主动约束容器高度边界，再配合 overflow-y: scroll 触发滚动机制。

✅ 推荐方案一：使用 aspect-ratio（简洁可靠，推荐首选）

当所有网格项具有统一宽高比（如 16 / 9）且列数固定（如 3 列）时，可直接为容器设置相同 aspect-ratio，Grid 会自动按比例推导出高度，天然适配 3 行布局：

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列均分 */
  gap: 2px;
  width: 300px;
  aspect-ratio: 16 / 9; /* 容器宽高比 = 单项宽高比 × 列数 / 行数 → 16/9 × 3/3 = 16/9 */
  border: 3px solid blue;
  overflow-y: scroll; /* 超出时滚动 */
  box-sizing: border-box;
}

#grid > div {
  display: grid;
  place-content: center; /* 替代 flex，更简洁 */
  aspect-ratio: 16 / 9;
  background-color: #ccc;
}

✅ 优势：响应式友好、无需 JS 计算、代码简洁
⚠️ 注意：aspect-ratio 在现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）中已全面支持；若需兼容旧版 IE/早期浏览器，需降级方案。

✅ 推荐方案二：calc() 精确计算高度（兼容性更强）

若需精确控制（例如考虑 gap 像素、或 aspect-ratio 不可用），可手动计算 3 行总高度：

假设：

单项宽高比 16 / 9
容器宽度 300px
每行含 3 项，gap: 2px → 行间共 2 条横向 gap → 总 gap 高度 = 2px × (3 - 1) = 4px

则 3 行内容总高度 = 300px × 9 / 16（单项高度 × 3 行），再减去 gap 占用：

#grid {
  height: calc(300px * 9 / 16 - 4px); /* 关键：显式设高 */
  /* 其余样式同上 */
}

✅ 优势：全浏览器兼容（CSS2+）、高度完全可控
⚠️ 注意：gap 值变化时需同步更新 calc() 中的减法项；若列数变动，公式需重推导（高度 = 单项高度 × 行数 + gap × (行数−1)）。

? JavaScript 辅助（动态适配场景）

若容器宽度或单项比例动态变化，可借助 JS 实时计算并注入内联样式：

const grid = document.getElementById("grid");
const cols = 3;
const rows = 3;
const itemRatio = 16 / 9; // 16:9 → 1.777...
const gap = 2;

// 基于当前宽度计算理想高度
function updateGridHeight() {
  const width = grid.clientWidth;
  const itemHeight = width / cols / itemRatio;
  const totalHeight = itemHeight * rows + gap * (rows - 1);
  grid.style.height = `${totalHeight}px`;
}

updateGridHeight();
window.addEventListener('resize', updateGridHeight);