CSSグリッドレイアウト - Microsoft Edgeでのコンテンツの折りたたみ

Question

私は、古いブラウザーを回避するために、新しいCSSグリッドレイアウトを使用して定義リストをスタイル付けしようとしています。 自動プレフィクサは、のエッジの古いバージョンに変更します。上記のコードを見ると

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>

、判読不能であるコンテンツ全体を崩壊エッジ。 grid-column-startとgrid-column-endを追加すると、<dt>と<dd>が右の列にプッシュされます。

すべて<dt>は、最大幅のmin-contentと同じ幅である必要があります。

<dl>の子の最終量を知らなくても、コンテンツを正しい行にプッシュする方法はありますか？

Answer 1

Microsoft Edgeは、CSS Grid Layout仕様の古いバージョンをサポートしています。

Edgeは現在、現在の仕様を実装しています。どのような作品とどのようなない、と実施状況を含むグリッドのためのエッジのサポートの詳細については、

、このページを参照してください。

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