Issue with Edge 44 and grid-template-columns: inherit

user_13618725 0
Viewed 134

I'm working on a layout that uses CSS-grid with breakout sections that use grid-template-columns: inherit;. Basically using the technique described in this article: https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

This works fine in major browsers, except for Edge 44, where grid-template-columns: inherit; seems to break the layout. If I simply copy the inherited value by hand, it displays fine.

Anyone know why this is happening, and if there is a way to fix it without manually duplicating the inherited values?

Here is a short code snippet showcasing the issue:

body {
  display: grid;
  grid-template-columns: [full-start] minmax(2em, 1fr) [main-start] minmax(0px, calc(500px / 2)) [main-right] minmax(0px, calc(500px / 2)) [main-end] minmax(2em, 1fr) [full-end];
}

.breakout {
  background: grey;
  width: 100%;
  grid-column: full;
  display: inherit;
  grid-template-columns: inherit;
}

.content {
  grid-column: main;
}
<body>
  <div class = "breakout">
    <div class = "content">
      <p> This is the content inside the breakout element. It should sit properly within the grid, but for some reason it breaks in Edge 44. </p>
    </div>
  </div>
</body>

EDIT: Seems like the problem stems from inheriting with calc(). Possibly a bug?

microsoft-edge css-grid cross-browser css
1 Answers

I could reproduce the problem on Microsoft Edge 44 version, after testing, it seems that if we using [full/main-start] with calc(), it will show this issue on Microsoft Edge 44.

As a workaround, you could try to set a fixed size for the grid-template-columns minmax() function. Code as below:

    body {
        display: grid;
        grid-template-columns: [full-start] minmax(2em, 1fr) [main-start] minmax(0px, 250px) [main-right] minmax(0px, 250px) [main-end] minmax(2em, 1fr) [full-end];
    } 
    .breakout {
        background: grey;
        width: 100%;
        grid-column: full;
        display: inherit;
        grid-template-columns: inherit;
    }

    .content {
        grid-column: main;
    }

Then the output as below: enter image description here

user_70622910
Related