如何用CSS实现两栏布局中标题高度一致？

方案一：基于现有Grid布局优化 #

你当前已经使用了Grid布局，只需给包裹h2和p的内层div添加Grid布局规则，就能让所有标题行的高度统一为最高标题的高度，段落自动从同一水平线开始：

修改后的CSS代码：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* 给内层容器设置Grid行模板 */
.cta > div {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem; /* 可选，调整标题与段落的间距 */
}

原理：grid-template-rows: auto 1fr会让第一行（标题）的高度由内容决定，且Grid布局会自动将所有列的第一行高度同步为最高单元格的高度，第二行（段落）则占据剩余空间，实现段落对齐。

方案二：Flex布局实现 #

如果改用Flex布局，通过设置弹性容器和项目的属性，同样能达到效果：

修改后的CSS代码：

.grid {
  display: flex;
  gap: 2rem;
}

.cta {
  flex: 1; /* 让两栏宽度均等分配 */
}

.cta > div {
  display: flex;
  flex-direction: column;
  height: 100%; /* 让内层容器占满父元素高度 */
}

.cta h2 {
  flex-shrink: 0; /* 禁止标题被压缩，保证高度由内容决定 */
  margin-bottom: 1rem; /* 可选，调整间距 */
}

.cta p {
  flex-grow: 1; /* 段落占据剩余空间 */
}

原理：内层flex容器采用垂直方向布局，flex-shrink: 0确保标题不会被压缩，Flex会自动让所有标题的高度匹配最高的那个，段落则从同一位置开始排列。

内容的提问来源于stack exchange，提问作者Mukeysh