[Webkit-unassigned] [Bug 280613] New: large subgrid gap behaves differently in Safari and Chrome

Mon Sep 30 06:19:19 PDT 2024

https://bugs.webkit.org/show_bug.cgi?id=280613

            Bug ID: 280613
           Summary: large subgrid gap behaves differently in Safari and
                    Chrome
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: imbashenk at hotmail.com
                CC: koivisto at iki.fi

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>large gap subgrid safari</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
  <main>
    <section>
      <div></div>
    </section>
  </main>
</body>

<style>
  body {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
  }

  main {
    margin: 0 auto;
    max-width: 70ch;
    padding: 1rem;

    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 10rem;
  }

  section {
    grid-column: 1 / -1;

    div {
      background-color: red;
      height: 100px;
    }
  }
</style>

</html>

```

When resizing the screen to a small screen size, the div overflows its container. This does not happen in Chrome and Firefox. I believe this happens because of the gap: 10rem, that probably gets inherited by the subgrid and then breaks the max container width. There is a workaround by changing gap to row-gap.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240930/9b3bce34/attachment-0001.htm>