Grid layout is NOT fully supported in Edge browser when number of tags are dynamic in <dl>

Neha Ahuja 1

When we have the below code where number of <dt> and <dd> are not known prior and depending on the API response. The grid layout doesn't work in Edge browser causing the overlapping issue. It only works when we use -md-grid-row: 1, -md-grid-row: 2, -md-grid-row: 3, and so on....

This is an issue as users may not how many <dt> and <dd> tags will be present in <dl>. Also, they may not be using any helper css libraries for that and won't prefer to manipulate css using JavaScript code.

Note: This is very well handled in all other browsers.

Yu Zhou-MSFT 12,031 Reputation points Microsoft Vendor

2021-03-29T07:29:46.807+00:00
@Neha Ahuja Which version of Edge are you using? I test with below code sample and it works well in Edge 89.0.774.63:

style:

dl { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

html:

<dl> <dt>first</dt> <dd>aaaaaaaaaa</dd> <dt>second</dt> <dd>bbbbbbbbb</dd> <dt>third</dt> <dd>cccccccccc</dd> </dl>

No matter how many <dt>, <dd> you have, the layout is always two columns in browsers. If your grid layout is not like this, please provide the related css styles which can reproduce the issue so that we can have a test and see how to help.