CSS Grid Layout rendering failure in Trident 6

Answer the question first

To keep IE10 grids from collapsing and keep items aligned at any resolution, you must give every grid container explicit track definitions and place each child with the corresponding -ms-grid-column and -ms-grid-row values. The minimal, reliable combination is:

display: -ms-grid;
-ms-grid-columns: ;
-ms-grid-rows: ;

Then for each child:

-ms-grid-column: ;
-ms-grid-row: ;
-ms-grid-column-align: ;
-ms-grid-row-align: ;

Use auto or 1fr only inside the -ms-grid-columns and -ms-grid-rows lists; IE10 will not auto‑size tracks otherwise. Add media queries that redeclare the -ms-grid-columns and -ms-grid-rows values to adjust the grid for smaller or larger viewports.

Why this works

• IE10 requires explicit track sizing; missing values cause the grid to collapse.
• Positioning properties map directly to the grid cells, so items never overlap unless the track list changes.
• Alignment properties (-ms-grid-column-align / -ms-grid-row-align) provide the same control as justify-self / align-self in the standard spec.
• Re‑declaring the track lists in media queries guarantees the layout reflows without DOM changes.

Steps to implement

1. Give the grid container display: -ms-grid; and define -ms-grid-columns and -ms-grid-rows with concrete values (px, %, or fr).
2. For each child element, set -ms-grid-column and -ms-grid-row to the desired cell numbers, and optionally -ms-grid-column-span / -ms-grid-row-span if the item spans multiple tracks.
3. Apply -ms-grid-column-align and -ms-grid-row-align to control the item’s alignment within its cell.
4. Wrap the track list definitions in media queries to adjust for different screen widths.
5. Verify in IE10 by inspecting computed styles and resizing the window.

Missing detail needed

Could you share the current -ms-grid-columns and -ms-grid-rows values you use in your media queries? Knowing those will help fine‑tune the recommendation for your specific layout.