如何用CSS实现网格布局：标题溢出隐藏、元信息固定底部

需求说明 #

• 无论标题高度如何，日期与分类信息（.entry-meta）始终固定在右侧内容区域底部，且右侧内容区高度不低于左侧缩略图
• 标题过长时，超出部分自动隐藏

问题现状 #

• 部分文章中，.entry-meta位置随标题高度变动，无法固定在底部
• 标题过长会撑开容器，导致布局不协调

调整后的CSS代码 #

article {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 0.5rem;
  grid-template-areas: "A B";
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr; /* 强制左右列高度一致 */
}

img.thumbnail {
  min-width: 144px;
  height: 100%; /* 让图片填满左侧容器高度 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

.entry-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* 占满网格分配的高度 */
}

.entry-header * {
  line-height: 18px;
}

.entry-title {
  font-size: 16px;
  /* 文本截断：最多显示2行，超出部分用省略号代替 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0.5rem; /* 与下方meta保持间距 */
}

.entry-meta {
  font-size: 12px;
  flex-shrink: 0; /* 防止meta被压缩变形 */
}

关键修改解析 #

1. article添加grid-template-rows: 1fr：强制左右两列高度完全一致，确保右侧内容区不会低于左侧缩略图
2. .entry-header改为弹性布局：通过flex-direction: column和justify-content: space-between，让标题占据上方空间，.entry-meta固定在底部
3. 标题文本截断：使用webkit前缀的多行截断方案，可通过调整-webkit-line-clamp的值控制显示行数
4. 图片适配：给缩略图添加height: 100%和object-fit: cover，确保图片填满左侧容器且比例正常

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