[css-grid-3] Do we need a `masonry-basis` property?

[tabatkins]

In flexbox, we have flex-basis separate from max-width/min-width, which we use for linebreaking purposes; after we determine what all goes on each line, the items can grow/shrink as they wish.

Would this concept be useful in Masonry as well? It would be useful when doing repeat(auto-fill, ...) - masonry-basis would be used to determine what size we use for the purpose of sizing masonry tracks, and then the item would size normally when it's actually placed, ignoring the basis.

Today, the best we can do for this case is set a max-width, but that prevents the item from growing after we determine the track sizes (which might end up larger than that max width!).

For example:

.masonry {
  display:masonry;
  grid-template-tracks: repeat(auto-fill, basis);
  /* ^^^ the default value, hopefully */
  width: 700px;
}
.masonry > .item {
  masonry-basis: 200px;
}

This would result in us calculating 3 columns, because all the items are requesting 200px size. The columns then (becuase they're justify-content:stretch by default) stretch to 233px, and the items all lay out into that size and become 233px as well.

[astearns]

Perhaps this should be an item-basis property, taking over the flex-basis functionality as well?

[Loirooriol]

In flexbox, flex-basis completely overrides the preferred main size. Here it's only for sizing tracks, not for the final size of the item, so unifying them may create confusion. Also if it's made a general thing it should probably work on non-masonry grid too, but then authors may want a different value per axis?

[fantasai]

I think you do this by setting min-width on the items, and minmax(auto, 1fr) in the tracks.