First Steps into a Possible CSS Masonry Layout

Although not as popular as container query, CSS natively supports "masonry" layouts have always been a feature that CSS developers strongly expect. Masonry layout refers to elements of varying sizes and arranged in uneven rows, which is a bit like a brick wall placed on the side.

CSS itself can implement this layout, but there is a big limitation: the items are not arranged by row, but by column, which is often difficult to meet the needs.

 <code>/* 通常人们不想要这种排列方式*/ 1 4 6 8 2 7 3 5 9</code>

 <code>/* 他们想要这种排列方式* 1 2 3 4 5 6 7 8 9</code>

If you want to arrange both uneven rows and maintain the horizontal source code order, you can only use JavaScript. But things have changed now, Firefox introduced this feature with feature flags in the Night Edition as part of the CSS Grid.

Mats Palmgren said:

Implementation of this proposal is now available in Firefox Nightly. It is disabled by default, so you need to load about:config and set the preference layout.css.grid-template-masonry-value.enabled to true to enable it (type "masonry" in the search box on this page and it will show that preference).

Jen Simmons has created some demos:

Is this really a grid layout?

Rachel Andrew raised some questions about this...

Grid layout is not a masonry layout because it is a grid with strict rows and columns. If you look at the layout created by the masonry layout again, we will find that it does not have strict rows and columns. Usually we have defined rows, but the column behaves more like flex layout or multicol. The key difference between Multicol layout and masonry layout is that in Multicol, items are displayed in columns. In masonry layouts, they are usually desired to be displayed by row.

[…]

Personally, I don't really like it as part of the grid specification. It does look attractive at first glance, but I think it's a relatively professional layout pattern, which is actually not a grid layout at all. It's more similar to flex layout than grid layout.

By putting this layout method into the grid specification, I'm worried that we will then need to support the masonry function when making any other additions to the grid.

All of this has not yet been finalized and is being actively discussed by the CSS Working Group.

As Jen said:

This is an experimental implementation – being discussed as possible CSS specifications. It's not official yet and may change. Don't write a blog post saying it's definitely a thing. It's not yet. Not yet. It is an experiment. A prototype. If you have an idea, please post your comment on CSSWG.

Houdini?

Last time I discussed native masonry layout, it was mixed with the idea that the CSS layout API (as part of Houdini) could achieve this. As you can see when you open this demo (repository) in Chrome Canary, this is a feature.

I don't fully understand whether Houdini is intended to be a feature so that ideas like this can be prototyped in the browser and eventually removed from Houdini, or whether those ideas should stay in Houdini, or what.

The above is the detailed content of First Steps into a Possible CSS Masonry Layout. For more information, please follow other related articles on the PHP Chinese website!