CSS Grid 中的原生 CSS Masonry 布局

Rachel Andrew 介绍了 masonry 布局即将通过 CSS 网格布局成为原生 CSS 的一部分的事实。 Masonry 的问题是我们已经可以做到，但只有一件事让它变得很困难：进行垂直交错 *并且* 具有从左到右的源代码顺序。因此，除了总体上减少 hack 之外，这项新功能将解决这个问题。

您现在可以在 Firefox Nightly 中通过启用 layout.css.grid-template-masonry-value.enabled 来测试部分实现。

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

我喜欢 grid-template-rows: masonry; 语法，因为我认为它清楚地传达了：“您没有设置这些行。事实上，现在甚至没有真正的行，我们会处理好。” 我想这意味着子网格中没有要继承的行，这也说得通。

评论