Safari bug report: subgrid doesn't respect justify-content

Browser engineers encourage blogging about issues with engines, so here I’m reporting an issues with Safari that doesn’t respect the justify-content property on the subgrid containers. The justify-content is not only a property of a flexbox, but you can also use it on grid containers to define how to distribute the space between items.

<section class="grid">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</section>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 25%);
  gap: 1rem;
  justify-content: space-between;
}

See the Pen 2026.08.04 - 1: Safari bug report: subgrid doesn't respect justify-content by Pawel Grzybek (@pawelgrzybek) on CodePen.

Let’s add another element into the mix that inherits the grid-template-columns definition from the parent using subgrid and also adds justify-content, just like it’s parent.

<section class="grid">
  <div>one</div>
  <div>two</div>
  <div>three</div>

  <section class="subgrid">
    <div>one</div>
    <div>two</div>
    <div>three</div>
  </section>
</section>

.subgrid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  justify-content: space-between;
}

See the Pen 2026.08.04 - 2: Safari bug report: subgrid doesn't respect justify-content by Pawel Grzybek (@pawelgrzybek) on CodePen.

As a result, the subgrid should look no different from the top-level divs. This is the case in Chromium and Firefox, but not in Safari. Here is the Bug 321024 on the WebKit Bugzilla website, so you can track the progress of resolution of that issue.

Leave a comment