CSS Grid Layout - content collapsing on Microsoft Edge

Question

I'm trying to style a definition list with the new CSS Grid Layout using @support to get around older browsers. Autoprefixer changes it to a older version for Edge.

dl {
  display: grid;
  grid-gap: 0.5rem 0.75rem;
  grid-template-columns: min-content 1fr;
  
  display: -ms-grid;
  -ms-grid-gap: 0.5rem 0.75rem;
  -ms-grid-columns: min-content 1fr;
  
}

/* visual styles */
dl {
  font-family: sans-serif;
  padding: 0.75rem;
}

dt {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

dd {
  margin: 0;
}

<dl>
  <dt>Lorem</dt>
  <dd>Ipsum</dd>

  <dt>Lorem</dt>
  <dd>Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</dd>

  <dt>Longer Lorem</dt>
  <dd>Ipsum</dd>
</dl>

Looking at the code above, Edge collapses the whole content which is unreadable. Adding grid-column-start and grid-column-end pushes the <dt> and <dd> into the right columns.

All <dt>s should have the same width with the min-content of the largest one.

Is there a way to push the content into the correct rows without knowing the final amount of children of <dl>?

Answer 1

Microsoft Edge supports an obsolete version of the CSS Grid Layout specification.

Edge is now implementing the current spec.

For more information about Edge support for Grid, including what works and what doesn't, and the status of implementation, see this page:

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/grid/?q=grid%20update