Description
In css-grid-3 is a tentative definition for sizing auto tracks within an auto repeat.
However, it is unclear what items with a % size contribution should resolve against.
One option that @tabatkins, @bfgeek and I discussed was resolving against the parent, which would result in the following:
<style>
.masonry {
display: masonry;
background: gray;
item-tolerance: 0;
grid-template-columns: repeat(auto-fill, auto);
width: 400px;
height: 200px;
}
.masonry > div {
width: 25%;
height: 100px;
}
</style>
<div class="masonry">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
In the above example, the auto tracks would get sized to 100px, and you'd end up with 4 columns. Then the items when laid out would take up 25% of the track size, and get sized to 25px. Meaning that auto
isn't the size of the largest contribution, since the items end up being sized based on the track size itself, and will always end up being smaller.
This seems potentially reasonable enough. The other option would be to size the item as auto
, but in the above case would lead to auto
computing to 0px, which isn't great, but it may result in potentially better behavior if there were other fixed size items in the container.