Skip to content

[css-grid-3][Masonry] Repeat(auto-fill, auto) and % sized items #12432

Open
@alisonmaher

Description

@alisonmaher

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions