带长标题的Justified Grid布局适配及Masonry布局实现需求

以下是纯CSS Grid方案，同时解决长标题破坏布局的问题，保留你需要的两种布局模式：

统一HTML结构 #

<div class="gallery justified">
  <div class="gallery-item">
    <div class="item-img">
      <img src="your-image-1.jpg" alt="图片描述">
    </div>
    <div class="item-title">短标题示例</div>
  </div>
  <div class="gallery-item">
    <div class="item-img">
      <img src="your-image-2.jpg" alt="图片描述">
    </div>
    <div class="item-title">这是一个非常长的测试标题，用来验证布局是否会因为超长文本而失效或错位</div>
  </div>
  <!-- 更多画廊项... -->
</div>

1. Justified布局（行固定高度，自由宽度） #

该布局保持每行高度一致，图片按比例自动分配宽度，通过固定标题高度+溢出截断解决长标题问题：

/* Justified 核心布局 */
.gallery.justified {
  display: grid;
  grid-auto-rows: 280px; /* 固定每行总高度（图片+标题） */
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.gallery.justified .gallery-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.gallery.justified .item-img {
  flex: 1; /* 占据除标题外的所有剩余空间 */
  overflow: hidden;
}

.gallery.justified .item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪溢出部分 */
}

/* 长标题处理 */
.gallery.justified .item-title {
  height: 40px; /* 固定标题高度 */
  padding: 8px 12px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 单行截断 */
  /* 如需多行截断，替换为：
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  */
  background: #fff;
}

关键说明 #

• grid-auto-rows强制每行高度一致，彻底避免长标题撑高布局
• 弹性布局让图片自动填充行内剩余空间，保证图片比例正确
• 标题固定高度+溢出截断，既保留可读性又不破坏布局结构

2. Masonry布局（列固定宽度，自由高度） #

采用原生CSS Grid实现瀑布流布局，同样通过标题高度限制解决长文本问题：

/* Masonry 核心布局 */
.gallery.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px); /* 固定列宽 */
  grid-auto-rows: 10px; /* 小步长实现细腻的瀑布流排列 */
  grid-gap: 16px;
  /* 原生Masonry特性（Chrome/Edge 117+、Firefox 117+支持） */
  grid-template-rows: masonry;
}

.gallery.masonry .gallery-item {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  grid-row-end: span calc(var(--item-height) / 10); /* 配合小步长计算占据行数 */
}

.gallery.masonry .item-img img {
  width: 100%;
  height: auto; /* 图片高度自适应比例 */
  display: block;
}

/* 长标题处理 */
.gallery.masonry .item-title {
  padding: 8px 12px;
  background: #fff;
  max-height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; /* 多行截断 */
}

关键说明 #

• 原生grid-template-rows: masonry无需JS即可实现瀑布流排列
• 标题通过多行截断限制最大高度，避免单个item过度拉伸
• 如需兼容旧浏览器，可通过JS计算每个item的总高度并设置--item-height变量

布局切换 #

只需给.gallery容器切换justified或masonry类，即可在两种布局间快速切换。

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