Skip to content

[css-grid-3][masonry] impact of negative margins on running positions within a track, dense-packing, and alignment #12918

@celestepan

Description

@celestepan

Effect on Running Positions
If an item has negative margins, it's not clear in the spec how this will affect the placement of the items following it in the same track.

In masonry, we might see something like this, where item 2 has negative margins that cause it to end earlier than item 1:

Image

Would we want the 3rd item in the track to be placed right after item 2:

Image

or have it placed after item 1, which ends at a greater running position than item 2:

Image

In CSS Flex, when an item has negative margins, the items following it are always placed directly after.

When we only have 2 items, and the second one has a negative margin greater than the width of the first item, we see the end of the first item peeking out underneath:

  <div class="flex">
    <div style="background: lightblue;"> hello world </div>
    <div style="background: lightgreen; margin-top: -25px;"> hello world </div>
  </div>
Image

If we had a third item, it will be placed directly after the second item, covering up the end of the first item.

  <div class="flex">
    <div style="background: lightblue;"> hello world </div>
    <div style="background: lightgreen; margin-top: -25px;"> hello world </div>
    <div style="background: lightpink;"> hello world </div>
  </div>
Image

Based on this behavior, it would seem that we would want the same for masonry, where the running position for each track is set to be whatever is the most recently placed item in that track, and items placed later in that track go directly behind it.

Effect on Dense Packing
In dense-packing, the placement of items with negative margins inside track openings may look strange. If an item's negative margin is great enough, it may look like it's an out-of-flow item above the other items:

Image

Or the item with negative margin may not take up as much of the track opening as the height of the item indicates:

Image

Or the item could bleed into another track opening (accounting for this in the track opening it bleeds into would be very difficult):

Image

Effects on Alignment
If we do end up adding support for alignment in the stacking axis, negative margins would raise questions similar to what we are currently discussing in #10275.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Thursday Afternoon

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions