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>?