feat: update data-grid to use CSS subgrid.

[KingOfTac]

Pull Request

Description

This PR updates data grid to use CSS subgrid rather than flexbox on the grid and grid on the rows. This makes it easier to have column widths be consistent across the header row, if present, and regular rows in the grid because now they are all aligned to the same grid tracks rather than each row being a separate grid.

I ran into this issue of differing column widths while creating a grid that can have variable width content in the header cells (sortable columns where the sort arrow icons are hidden until the column is being sorted on) AND when trying to set the grid-template-columns on the parent data-grid to fit-content. This resulted in the header cells being wider than the cells in the regular rows and is only made worse when the cells have left/right borders on them as the borders between cells in the header and the next row don't align vertically. With this change the rows now inherit their grid-template-columns from their parent grid and made to span all the columns of the parent grid so any changes to column widths on the grid are matched on all of the rows consistently.

CSS subgrid has support in all three major browser engines going back at least two versions so I am confident with making this change now.

Issues

microsoft/fast#6886

Reviewer Notes

Draft for now until microsoft/fast#6886 gets released in Foundation.

Test Plan

Checklist

General

• I have included a change request file using $ npm run change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation for this project.

Component-specific

• I have added a new component
• I have modified an existing component

⏭ Next Steps