css grid_砌体是否属于CSS Grid规范？

css grid

When I first began to demo CSS Grid to people, in particular the dense packing mode, at a first glance it looked a bit like the layout achieved by - most notably - the Masonry JavaScript plugin. Sometimes also described as a Pinterest Layout, after the application which is best known for using this kind of layout.

当我第一次向人们演示CSS Grid时，特别是密集打包模式时，乍一看，它看起来有点像由Masonry JavaScript插件实现的布局。 在以使用这种布局而闻名的应用程序之后，有时也称为Pinterest布局。

Grid isn’t Masonry, because it’s a grid with strict rows and columns. If you take another look at the layout created by Masonry, we don’t have strict rows and columns. Typically we have defined rows, but the columns act more like a flex layout, or Multicol. The key difference between the layout you get with Multicol and a Masonry layout, is that in Multicol the items are displayed by column. Typically in a Masonry layout you want them displayed row-wise.

网格不是砖石，因为它是具有严格行和列的网格。 如果再看一看Masonry创建的布局，我们没有严格的行和列。 通常，我们已经定义了行，但是列的行为更像是flex布局或Multicol。 通过Multicol获得的布局与砌体布局之间的主要区别在于，在Multicol中，项目按列显示。 通常，在砌体布局中，您希望它们按行显示。

I raised an issue in January 2017 due to the number of people who had requested a Masonry-like layout. It seemed to come up in every talk and workshop I did, as it was a very popular layout at one point. At that point I noted it seemed more flex, than grid-like.

由于要求进行砌体式布局的人数众多，我于2017年1月提出了一个问题。 我似乎在每次演讲和研讨会中都提到了这一点，因为它在某一时刻是一种非常受欢迎的布局。 在那一点上，我注意到它似乎比网格更灵活。

Requests for Masonry do seem to have died down somewhat, although that may well be because people have realised grid is not Masonry so have stopped thinking it would solve that problem and therefore don’t comment on it. However Firefox have implemented an experimental way to do this, which is currently using the grid spec. The CSS Working Group would love for you to have a look at it.

对砌体的需求似乎确实有所下降，尽管这很可能是因为人们已经意识到网格不是砌体，所以不再认为它可以解决该问题，因此不对此发表评论。 但是，Firefox已经实现了一种实验方法来实现此目的，目前正在使用网格规范。 CSS工作组希望您对此有所了解。

To do so, you need to have Firefox Nightly, and to enable the flag layout.css.grid-template-masonry-value.enabled by going to about:config in the Firefox Nightly URL bar.

为此，您需要拥有Firefox Nightly，并通过在Firefox Nightly URL栏中转到about：config来启用flag layout.css.grid-template-masonry-value.enabled标志。

I’ve built a simple demo which you can see below, plus a second one as an experiment to see what happens if you have an item placed on the grid.

我建立了一个简单的演示，您可以在下面看到， 另外还有一个演示， 作为实验，以查看将某个项目放在网格上会发生什么 。

演示地址

Speaking personally, I am not a huge fan of this being part of the Grid specification. It is certainly compelling at first glance, however I feel that this is a relatively specialist layout mode and actually isn’t a grid at all. It is more akin to flex layout than grid layout.

就个人而言，我并不是网格规范这一部分的忠实拥护者。 乍看之下确实很吸引人，但是我觉得这是一个相对专业的布局模式，实际上根本不是网格。 与网格布局相比，它更类似于弹性布局。

By placing this layout method into the Grid spec I worry that we then tie ourselves to needing to support the Masonry functionality with any other additions to Grid. Or, essentially saying that you can’t do a certain thing when in Masonry mode. Whereas Flexbox is a simpler spec, and one that is less likely to have new functionality loaded into it. I’m keen that we get the layout method, less so of where Mozilla are proposing it sits. I can imagine this being a future weight that has to accompany all additions to Grid, that we’ll forever more be asking the question, “but how does this work with Masonry?” So I would weigh the convenience of it seeming to fit quite nicely into Grid today, with whether that convenience today will become a burden in the future.

通过将这种布局方法放入Grid规范中，我担心我们接下来将需要支持Grid的其他任何功能来支持Masonry功能。 或者，从本质上说，在砌体模式下您不能做某事。 而Flexbox是一种较为简单的规范，不太可能在其中加载新功能。 我很希望我们得到布局方法，而不是Mozilla提出的布局方法。 我可以想象这是未来的重量，它必须伴随Grid的所有增加，我们将永远问这个问题，“但这如何与Masonry一起使用？” 因此，我想将它的便利性很好地融入当今的Grid中，今天的便利性是否会成为将来的负担。

Anyway, the CSSWG would love your feedback. Jen Simmons has also built some demos - here and here. In particular it would be very useful to see if it would work in situation where you have already used Masonry, or would have liked to but didn’t because of the performance issues of that type of layout.

无论如何， CSSWG会很乐意您的反馈 。 詹·西蒙斯（Jen Simmons）还在这里和这里构建了一些演示。 特别是，如果它已经使用Masonry，或者由于该类型布局的性能问题而希望但不希望使用，将很有用。

翻译自: https://rachelandrew.co.uk/archives/2020/05/05/does-masonry-belong-in-the-css-grid-specification/

css grid