如何在不指定标题高度时，实现标题下方内容顶部对齐

要实现标题行数不固定时，下方段落的顶部始终对齐，且无需指定标题高度，可通过以下两种方案实现：

方案一：使用CSS Grid布局（推荐） #

Grid布局天然支持同列元素自动对齐，只需修改父容器的布局规则：

/* 将.item-wrapper改为Grid布局 */
.flexbox-row.item-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列等分宽度 */
    gap: 90px; /* 用gap控制列间距，替代原有的左右padding */
}

.columns .item {
    /* 移除原Flex相关属性 */
    display: block;
    max-width: unset;
    flex-basis: unset;
    padding: 0; /* 移除左右padding，避免和gap重复 */
}

/* 保留原有段落样式 */
#buy-sell .columns p {
    padding-right: 110px;
}

HTML无需调整，Grid会自动让每列的标题区域高度统一，下方段落的顶部自然对齐。

方案二：调整Flex布局 #

若坚持使用Flex，可通过让标题容器自动填充空间来实现对齐：

.flexbox-row {
    display: flex;
}

.columns .item {
    display: flex;
    flex-direction: column;    
    max-width: 33.333333%;
    flex-basis: 33.333333%;
    padding: 0px 45px;
}

/* 让标题容器自动拉伸至与最高标题同高，推动段落对齐 */
.columns .section-title {
    flex: 1;
}

.columns .item:first-child {
    padding-left: 0;
}

.columns .item:last-child {
    padding-right: 0;
}

#buy-sell .columns p {
    padding-right: 110px;
}

flex:1会让每个标题容器自动适配最高标题的高度，无论标题是一行还是多行，下方段落的顶部都会对齐到同一水平线。

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