Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?

在CSS中实现砌体（masonry）布局一直存在竞争性提案。一方建议扩展现有的CSS Grid规范，另一方则提议将砌体布局设为独立模块。而最近，苹果WebKit团队提出了第三个选项——“Item Flow”。前两种方案各有优势，第三种方案则将它们合并为一，本文将详细探讨这些方案。

当你需要构建类似Pinterest的布局时，可能已经厌倦了使用JavaScript。CSS能否最终提供解决方案？对于初学者来说，浏览Pinterest页面可能会认为CSS网格布局就足够了，但实际构建时才会发现仅靠display: grid和一些调整是远远不够的。实际上，Pinterest使用JavaScript构建其布局，但如果仅用CSS实现该有多酷？

当前CSS砌体布局的现状

许多开发者尝试使用CSS Grid的手动行跨度技巧、CSS列和JavaScript库来实现砌体布局。没有原生砌体支持时，开发者通常转向Grid技巧，例如结合JavaScript模拟流动的grid-auto-rows技巧。

以下示例依赖JavaScript在渲染后测量每个项目的高度，计算应跨度的10px行数（包括间隙），动态设置grid-row-end，并使用事件监听器在页面加载和窗口调整大小时调整布局。

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


/* CSS */
.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
17


// JavaScript
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);

这种Grid技巧虽然接近砌体布局，但仍不完美。与原生grid-template-rows: masonry（仅在Firefox Nightly中实验性存在）不同，它依赖JavaScript计算跨度，违背了"无JavaScript"的梦想。JavaScript逻辑在调整大小或内容变化时重新计算跨度，在复杂页面上可能导致延迟。

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

一种前进方向是增强CSS Grid的砌体能力。截至目前，CSS网格已扩展以容纳砌体布局。grid-template-rows: masonry是CSS Grid Level 3的草案，目前在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的熟悉度和强大工具（如DevTools支持）。但存在局限性：Grid规范已包含align-content和grid-auto-flow等属性，添加砌体功能可能使其变得复杂。

方案二：独立砌体模块

另一种方法是采用display: masonry方式。这个设想在早期CSS工作组讨论中已被提出，值得设想其如何改善布局。

设想一个不依赖Grid严格轨道或Flexbox线性流动的布局系统，而是专注于垂直堆叠和水平扭转。目标是为砌体的标志性外观提供一个干净的平台：项目沿列级联，自然填充间隙，无需技巧。

提案内容：一个名为masonry的display值启动基于流动的系统，项目默认垂直堆叠，水平调整以适应容器。您可以使用以下简单属性控制方向和间距：

1
2
3
4
5


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

这种方案的巨大优势是与Grid的严格顺序彻底分离。独立模块保持它们 distinct：Grid用于顺序，Masonry用于流动。

Item Flow：统一布局解决方案

2025年3月，苹果的WebKit团队提出了Item Flow，这是一个将Flexbox、Grid和砌体概念统一到单一属性集中的新系统。Item Flow不是选择增强Grid或创建新砌体模块，而是合并它们的优势，用称为item-flow的简写替换flex-flow和grid-auto-flow。

这个系统引入了四个长手属性：

item-direction：控制流动方向（例如row、column、row-reverse）
item-wrap：管理换行行为（例如wrap、nowrap、wrap-reverse）
item-pack：确定包装密度（例如sparse、dense、balance）
item-slack：调整布局调整的容差，允许项目收缩或移动以适应

Item Flow旨在使砌体成为这些属性的自然结果，而不是独立功能。例如，砌体布局可以通过以下方式实现：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.container {
  display: grid; /* or flex */
  item-flow: column wrap dense;

  /* long hand version */
  item-direction: column;
  item-wrap: wrap;
  item-pack: dense;

  gap: 1rem;
}

正确路径是什么？

虽然没有直接答案，但砌体辩论的关键在于平衡简单性、性能和灵活性。使用砌体扩展Grid很诱人，但有可能使已经强大的系统过于复杂。独立的display: masonry模块提供了清晰度，但增加了CSS的学习曲线。最新的竞争者Item Flow提出了一个统一系统，可以使砌体成为Grid和Flexbox的自然扩展。

每种方法都有权衡：

带砌体的Grid：熟悉但可能笨重，存在可访问性和规范问题
新模块：干净且专为目的构建，但需要学习新语法
Item Flow：优雅且多功能，但尚未可用，命名和实施存在持续辩论

结论

那么，经过所有这些，我们落在哪里？砌体对决归结为三条路径：将砌体扩展到CSS Grid中、独立的砌体模块，或Item Flow。现在的问题是，CSS最终会让我们从砌体的JavaScript中解放出来，还是我们仍在做梦？

Grid正在用味道 teasing 我们，独立模块正在 whispering 承诺——但终点线不清楚，WebKit用杀手合并简写Item Flow swoops in。浏览器的购买、社区的推动和一些更多的规范修订可能会告诉我们。目前，这是你的行动——测试、调整和权衡。答案正在到来，一次一个布局。

CSS砌体布局之争：Grid扩展、独立模块还是Item Flow统一方案？

本文深入探讨CSS砌体布局的三种实现方案：扩展CSS Grid规范、创建独立砌体模块，以及苹果WebKit团队提出的Item Flow统一布局方案。分析了各方案的技术实现、优缺点及浏览器兼容性现状。