如何实现博客列表段落内容与标题始终同起始行（Elementor Pro）

要实现博客列表中标题行数不同但内容起始线对齐，同时保证帖子信息、标题、内容在同一容器内，可通过CSS Grid布局实现，这比你之前尝试的Flex布局更适配这类对齐需求：

步骤1：确认Elementor结构 #

确保每个博客条目容器（类名.post）内部包含三个独立区块：

• 帖子信息（如作者、日期，建议给此类元素加类名.post-meta）
• 博客标题（类名.post-title）
• 博客内容摘要（类名.post-content）

步骤2：替换为以下CSS代码 #

/* 给博客条目容器设置Grid布局，统一行结构 */
.post {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 16px; /* 可根据需求调整元素间距 */
    height: 100%;
    box-sizing: border-box;
    padding: 16px; /* 可选，根据你的设计添加内边距 */
}

/* 绑定各区块到对应网格行 */
.post-meta {
    grid-row: 1;
}
.post-title {
    grid-row: 2;
    display: flex;
    align-items: flex-end; /* 短标题自动靠下对齐，保证内容起始线统一 */
}
.post-content {
    grid-row: 3;
}

原理说明 #

Grid布局会自动将所有博客条目的grid-row:2（标题行）高度统一为所有标题中最高的那一个，无论单个标题是1行还是多行，内容区块（grid-row:3）都会从同一水平线开始。

可选调整 #

• 如果标题行高度需要强制最小限制，可将grid-template-rows改为auto minmax(72px, auto) 1fr，其中72px为标题行的最小高度，可根据你的字体大小调整。
• 若帖子信息和标题需要放在同一行，可将.post-meta和.post-title放在同一个子容器内，再给该子容器设置display:flex; justify-content:space-between; align-items:center;，同时调整网格行结构为grid-template-rows: auto 1fr;。

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