如何让 CSS Grid 中同一行的单元格高度一致？-html教程-PHP中文网

如何让 CSS Grid 中同一行的单元格高度一致？

在 CSS Grid 布局中，若希望同一行内各列单元格高度对齐（即每行中所有 grid item 高度由该行最高内容决定），根本原因在于 align-items: center 会抑制单元格自动拉伸；正确做法是移除该属性，并改用 flexbox 在单元格内部垂直居中文本。

在 css grid 布局中，若希望同一行内各列单元格高度对齐（即每行中所有 grid item 高度由该行最高内容决定），根本原因在于 `align-items: center` 会抑制单元格自动拉伸；正确做法是移除该属性，并改用 flexbox 在单元格内部垂直居中文本。

默认情况下，CSS Grid 的 grid-auto-rows（如 1fr）仅控制行高在整列方向上的统一（即同列中所有行高取最大值），而无法强制同一行内跨列单元格等高——后者实际由 Grid 的隐式行高机制自动保障：只要不显式限制单个 item 的高度或使用 align-items: center/stretched 等影响对齐的属性，Grid 会自然使同一行的所有单元格共享该行高度（由该行中内容最高的单元格决定）。

问题根源在于 align-items: center：它会让每个 grid item 收缩为自身内容高度，再居中放置，从而破坏了“行级等高”这一默认行为。因此，解决方案不是增加复杂规则，而是精简布局逻辑：

✅ 正确做法：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

移除 .grid-container 上的 align-items: center 和 grid-auto-rows: 1fr（后者在此场景下非必需）；
将垂直居中逻辑下放至单元格内部，使用 display: flex; align-items: center; justify-content: center（可选）；
保留 gap、border、background-color 等视觉样式不变。

以下是优化后的完整代码示例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin: 8px 0;
  width: 600px;
  gap: 2px; /* 保持原有间距 */
}

.grid-item {
  border: 1px solid grey;
  background-color: #fea;
  /* 在单元格内部实现垂直居中 */
  display: flex;
  align-items: center;
  padding: 0 8px; /* 可选：提升文字可读性 */
}

.bigger-text {
  font-size: 21px;
  line-height: 36px;
}

<div class="grid-container">
  <div class="grid-item">aaa</div>
  <div class="grid-item bigger-text">BBB</div>
  <div class="grid-item">ccc</div>
  <div class="grid-item bigger-text">DDD</div>
  <div class="grid-item">eee</div>
  <div class="grid-item bigger-text">FFF</div>
</div>

? 注意事项：