css.properties.justify-items - Add "Supported in Block Layout" data?

[nanaya]

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

Not all browsers support justify-items in block layout (Firefox doesn't) and the table doesn't say that anywhere.

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

A row for support in block layout with minimum version data.

Did you test this? If so, how?

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

MDN metadata

MDN page report details

• Query: css.properties.justify-items
• Report started: 2024-10-24T11:27:56.977Z

[caugner]

Here is the corresponding Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1930583

@nanaya Would you have a minimal example that shows a different behavior in Chrome or Safari, assuming one of these supports justify-items in block layout? 🙏

[nanaya]

here's an example

<style>
    .x {
        justify-items: center;
        border: 3px solid red;
    }

    .x > div {
        border: 3px solid blue;
    }
</style>
<div class="x">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

chrome 137:

firefox 138:

[caugner]

Thanks for the test case, created this JSBin to make testing easier.

Safari 18.4 does not appear to support this either:

According to https://issues.chromium.org/issues/355683658#comment8 and https://issues.chromium.org/issues/40310972#comment39, Chrome 122 started supporting this, but we should double-check with BrowserStack Live or similar, using the test case above.

Note that justify-self on block children is only supported from Chrome 130, according to https://chromiumdash.appspot.com/commit/f47b3fe44349130682e544e6a372b581c5714996.