Merchandise Circulation

Two weeks in the past, Jen Simmons from the Webkit group shared an article a couple of new structure module referred to as Merchandise Circulation. The thought is to unify the flex-flow and grid-auto-flow right into a unified system. This path will result in CSS masonry being built-in into the brand new syntax.

In October 2024, I printed my ideas about whether or not to have masonry as a part of the CSS grid or as a standalone new syntax (show: masonry).

At the moment, the Merchandise Circulation is being mentioned by the CSS working group. The objective of this text is to share my notes as I discover the brand new syntax.

First, let me provide you with an concept about how the brand new sytnax will give us masonry. Attempt to change between the values beneath and see how the CSS adjustments.

.structure {
    show: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-rows: masonry;
    hole: 1rem;
  }

Which sytnax do you suppose sounds higher?

Studying curve is minimal

Regardless of it being a brand new proposal, it integrates nicely with the present grid and flexbox syntax. When you take a look at the beforehand advised show: masonry syntax, it’s clear at first look that there’s a good studying curve, even in case you are a CSS skilled.

.structure {
  show: masonry;
  masonry-template-tracks: repeat(auto-fit, minmax(180px, 1fr));
  masonry-direction: column;
  hole: 1rem;
}

Whereas for the Merchandise Circulation, it simply feels at house. Even higher, switching from a standard grid to a masonry one requires altering item-flow property.

Right here is an instance that switches to masonry-style if there are 10 gadgets or extra within the grid.

.structure {
  show: grid;
  grid-template-columns: 1fr 1fr 1fr;
  hole: 1rem;
}

.structure:has(.card:nth-last-child(n + 10)) {
  item-flow: row collapse;
}

If the show: masonry is used, the code will appear to be this. I’m not a fan.

.structure {
  show: grid;
  grid-template-columns: 1fr 1fr 1fr;
  hole: 1rem;
}

.structure:has(.card:nth-last-child(n + 10)) {
  show: masonry;
  masonry-template-tracks: repeat(auto-fit, minmax(180px, 1fr));
  masonry-direction: column;
}

Which feels higher, altering a single CSS property (item-flow), or a totally new show sort?

Flexbox Packing

Dense

One of many mentioned factors is utilizing packing for flexbox. Within the CSS grid, we are able to apply grid-auto-flow: dense which can let the browser reorder the gadgets the place it sees match.

Within the following instance, now we have a CSS grid. When the dense is utilized, the gadgets are moved round to fill the additional house.

.structure {
  show: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: dense;
}

It’s value noting that utilizing dense will reorder the gadgets. It’s complicated and may trigger a11y points, however that’s the way it works.

With the Merchandise Circulation, there’s a suggestion to carry this to Flexbox. To realize that, we have to use item-pack.

In response to the Webkit illustrations, introducing packing to flowbox may very well be one of many two choices:

• Choice 1: shrink gadgets a bit to let extra gadgets match
• Choice 2: transfer gadgets round, just like dense in CSS grid

Within the following determine, the browser will shrink the flex merchandise only a bit to be able to enable more room for the smaller ones.

Within the following instance, I imagined having an inventory of tags, the place every tag hugs its content material with padding on the left and proper sides.

• First, there’s the default choice, which is utilizing Flexbox with a niche and wrapping enabled.
• Dense packing in flexbox: shrink the gadgets only a bit to have house for yet another merchandise. On this instance, it’s the “Turkish” one.
• Dense packing like in CSS grid: it re-orders the smaller gadgets round to make use of the house nicely.

I’m not 100% positive if I like this or not because the use-case above doesn’t make it click on to me. Possibly this idea might be helpful for one more use case.

Stability

Upon studying the Webkit article, there’s a suggestion for item-pack: stability. In brief, it’s going to stability the flex gadgets and try and do an identical factor to text-wrap: stability, however for flex gadgets.

Sounds fascinating.

Utilizing nowrap for grid

I’ve second ideas on this. Why would we’d like nowrap in Grid? By default, grid wrap apart from one case. When utilizing grid-auto-flow: column, it doesn’t.

Right here is an instance the place I positioned some gadgets in a small container.

.structure {
  show: grid;
  grid-auto-flow: column;
  hole: 0.5rem;
}

Within the Webkit’s publish, the advised code is the next:

.container {
  show: grid;
  grid-auto-columns: 1fr;
  item-wrap: nowrap;
}

..which ought to give every merchandise the identical quantity of house with out wrapping. Even when this works, I’m not precisely positive about the issue (or the use case) it solves.

What do you suppose?

A number of examples of Merchandise stream

I believed it might be a good suggestion to think about utilizing merchandise stream in a number of the frequent CSS that we write in some tasks.

A flex merchandise, flex container, with align-items

I’m making an attempt to think about how the brand new syntax will appear to be within the wild. Right here, I’ve a flexbox container. See the next:

.structure {
  flex: 1;
  align-self: begin;
  show: flex;
  align-items: middle;
  item-wrap: wrap;
  item-pack: stability;
}

I’m undecided about gadgets vs merchandise. Why do now we have a plural in align-items however not in item-pack, for instance? Regardless that each goal the flexbox youngster gadgets.

Heart the orphan merchandise in a grid

Say now we have a grid of two columns. At the moment, in CSS grid, there is no such thing as a direct method of centering the final merchandise. What if we are able to do that with the brand new syntax?

Right here is an instance CSS:

.structure {
  show: grid;
  grid-template-columns: 1fr 1fr;
  item-wrap: stability;
  hole: 1rem;
}

See the next determine for the way it seems to be like earlier than and after:

Wrap detect, or type of?

I’m a giant believer in getting wrap detection. I wrote about it in 2023. Simply think about if this new syntax may enable this or one thing round it.

.checklist {
  show: flex;
 item-wrap: wrap;

 @container wrap-state(wrap) {
 // do one thing
 }
}

Only a thought.

Webkit questions

My solutions for the questions raised on the finish of Webkit’s article.

Is that this a good suggestion to mix flex-flow and grid-auto-flow right into a unified system?

Sure. Sounds good to me.

As a developer would you employ the brand new syntax to perform the belongings you do at the moment with flex-flow and grid-auto-flow?

My utilization of the shorthand flex-flow and the grid-auto-flow is uncommon. Nevertheless, I’ll use the brand new syntax if I want it.

What different concepts may you’ve for combining current performance in Flexbox and Grid right into a unified system?

Possibly think about including a border between gadgets (In each flexbox and grid).

Are you excited concerning the prospects of including new capabilities to Grid and Flexbox? Which of them have probably the most potential that will help you do your work, and unlock new designs?

I’m enthusiastic about just a few issues:

• Masonry (after all!)
• Dense packing in flexbox
• Balanced wrapping in flexbox

What different new concepts may you need to add to this unified system?

Flexbox wrap detection.

Conclusion

I believed that it might be higher to share my ideas in a weblog publish. I’m glad I did that and hope that this new syntax will get extra consideration. It’s nice!