CSS 中的砌体布局：Grid 应该进化还是为新模块让路？

近期，关于在 CSS 中添加砌体式布局支持的提案出现了分歧。一方提议扩展现有的 CSS Grid 规范，另一方则建议将砌体布局设为独立模块。而最近，苹果 WebKit 团队提出了第三种方案——“Item Flow”。本文将探讨这三种方案的优缺点。

当前 CSS 中砌体布局的现状

许多开发者尝试使用 CSS Grid 配合手动行跨度技巧、CSS 多列或 JavaScript 库来实现砌体布局。以下是一个典型的 Grid 配合 JavaScript 的示例：

1
2
3
4
5
6


<div class="masonry-grid">
  <div class="masonry-item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="masonry-item"><p>Short text content here.</p></div>
  <div class="masonry-item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="masonry-item"><p>Longer text content that spans multiple lines to show height variation.</p></div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px;
  grid-auto-flow: column;
  gap: 10px;
}

.masonry-item {
  overflow: hidden;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

.masonry-item p {
  margin: 0;
  padding: 10px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


function applyMasonry() {
  const grid = document.querySelector('.masonry-grid');
  const items = grid.querySelectorAll('.masonry-item');

  items.forEach(item => {
    item.style.gridRowEnd = 'auto';
    const rowHeight = 10; 
    const gap = 10; 
    const itemHeight = item.getBoundingClientRect().height;
    const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));
    item.style.gridRowEnd = `span ${rowSpan}`;
  });
}

window.addEventListener('load', applyMasonry);
window.addEventListener('resize', applyMasonry);

这种方法虽然接近砌体布局，但存在性能问题、DOM 顺序与视觉流不匹配等缺陷。

方案一：扩展 CSS Grid 支持砌体布局

CSS Grid Level 3 草案中提出了 grid-template-rows: masonry 实验性功能，目前仅在 Firefox Nightly 中可用：

1
2
3
4
5
6


.masonry-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry;
}

优点：

基于熟悉的 CSS Grid 语法和工具链
无需学习全新语法
开发者工具支持（如 Chrome DevTools 网格覆盖）

缺点：

可能使 Grid 规范过于复杂
存在边缘情况处理问题（如多列跨度项目）
浏览器兼容性有限

方案二：独立的砌体模块

提议创建专门的 display: masonry 属性：

1
2
3
4
5


.masonry {
  display: masonry;
  masonry-direction: column;
  gap: 1rem;
}

优点：

专为砌体布局设计，语法清晰
与 Grid 的严格结构分离
提供更自然的流动布局

缺点：

需要学习新语法
浏览器厂商支持需要时间
可能造成布局方案选择困惑

方案三：Item Flow 统一布局方案

2025年3月，WebKit 团队提出 Item Flow，统一了 Flexbox、Grid 和砌体布局的概念：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.container {
  display: grid; /* 或 flex */
  item-flow: column wrap dense;
  
  /* 长手写法 */
  item-direction: column;
  item-wrap: wrap;
  item-pack: dense;
  
  gap: 1rem;
}

Item Flow 引入四个新属性：

item-direction: 控制流动方向
item-wrap: 管理换行行为
item-pack: 确定包装密度
item-slack: 调整布局容差

优点：

统一多种布局概念
增强现有布局功能
砌体布局成为自然结果

缺点：

尚未在浏览器中实现
命名和实现细节仍在讨论中
需要社区和浏览器厂商支持

哪种方案是正确的选择？

每种方案都有其权衡：

Grid 扩展方案：熟悉但可能笨重，存在可访问性和规范问题
独立模块方案：清晰且专为目的构建，但需要学习新语法
Item Flow 方案：优雅且多功能，但尚未可用，命名和实施存在争议

结论

砌体布局的解决方案仍在发展中。Grid 提供了实验性功能，独立模块提出了清晰方案，而 WebKit 的 Item Flow 则提供了统一的解决方案。最终答案将取决于浏览器支持、社区推动和规范修订。

参考文献

“Native CSS Masonry Layout in CSS Grid” by Rachel Andrew
“Should Masonry be part of CSS Grid?” by Ahmad Shadeed
“CSS Masonry & CSS Grid” by Geoff Graham
“Masonry? In CSS?!” by Michelle Barker
“Native CSS Masonry Layout in CSS Grids” by Chris Coyier
“Item Flow Part 1: A Unified Concept for Layout” by WebKit

CSS 砌体布局之争：Grid 应进化还是让位给新模块？

本文探讨了CSS中实现砌体布局的三种提案：扩展CSS Grid、独立砌体模块和WebKit的Item Flow方案，分析了各自的优缺点、技术实现及对前端开发的影响。