IE10's Prefixed CSS Grid: The -ms-grid Implementation and How to Handle It

The Problem: A Frozen Grid Specification

Internet Explorer 10 shipped with a prefixed implementation of the 2011 CSS Grid Layout draft (display: -ms-grid). This was not the modern Grid specification — it was a distinct, incomplete layout engine frozen at the IE10 release. If you are maintaining a Windows 8 Store app written in HTML/JS or debugging legacy intranet code that still runs in IE10, you need to understand how -ms-grid differs from modern display: grid so you can isolate it without breaking other browsers.

Useful takeaway: Treat -ms-grid as a separate layout mode. Serve it only to IE10 via @supports (display: -ms-grid) or a targeted media query, then override with unprefixed Grid for modern browsers. Never mix prefixed and unprefixed properties on the same rule.

How -ms-grid Works: A Worked Example

The legacy syntax requires explicit track sizing and manual placement for every child. There is no auto-placement, no named lines, no grid-template-areas, and no gap property.

.container {
  display: -ms-grid;
  -ms-grid-columns: 1fr 20px 3fr;   /* three tracks: sidebar, gutter, main */
  -ms-grid-rows: auto 1fr;            /* two rows: header, content */
}
.sidebar {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;               /* spans both rows */
}
.header {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}
.main {
  -ms-grid-column: 3;
  -ms-grid-row: 2;
}

In this example:

• -ms-grid-columns and -ms-grid-rows define explicit tracks using lengths, fr fractions, auto, min-content, or max-content.
• Each child must declare -ms-grid-column and -ms-grid-row. Items without both stack in the first cell (column 1, row 1), unlike modern auto-placement.
• Spanning uses -ms-grid-column-span and -ms-grid-row-span.
• The 20px gutter is a literal track — there is no grid-gap shorthand.

Feature Detection and Isolation

IE10 supports @supports and CSS.supports() for its prefixed value. Use this to fork stylesheets cleanly:

@supports (display: -ms-grid) {
  .container { display: -ms-grid; }
  /* -ms-grid-* rules here */
}

@supports (display: grid) {
  .container { display: grid; }
  /* modern grid rules here */
}

Run the detection in the IE10 console (F12 → Console) to verify:

CSS.supports('display', '-ms-grid'); // true
CSS.supports('display', 'grid');     // false

Where to run: IE10 Developer Tools (F12) Console tab. Permissions: None beyond opening DevTools. Expected check: First line returns true, second returns false. Risk: None — read-only query.

Limitations You Cannot Work Around

Because the implementation was never updated after IE10, these gaps are permanent. Edge 12+ dropped -ms-grid entirely in favor of the unprefixed spec.

Common Mistakes and How to Avoid Them

1. Mixing prefixed and unprefixed on the same selector
   

   /* BAD — cascade conflict in IE10 */
   .container {
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: 1fr 2fr;
     grid-template-columns: 1fr 2fr;
   }

   IE10 applies both display declarations (last wins) but ignores grid-template-columns. Modern browsers apply both and may compute conflicting layouts. Separate with @supports as shown above.

2. Assuming conditional comments work
   <!--[if IE 10]> is ignored in IE10+. Use @media -ms-high-contrast or the @supports fork instead.
3. Forgetting that fr behaves differently
   In the 2011 draft, fr divides remaining space after fixed tracks — similar to modern Grid — but min-content/max-content keywords have narrower support. Test track calculations in IE10 directly.
4. Targeting IE10 for new public projects
   IE10 reached end of life January 2020. No security patches. Restrict -ms-grid to maintained Windows 8 Store apps or locked-down intranet environments.

Verification Checklist

Before shipping any -ms-grid code path:

• Open the page in a genuine IE10 VM (or IE11 Enterprise Mode emulation) and inspect computed styles in the Styles pane — confirm -ms-grid-* properties appear and unprefixed grid-* do not.
• Run the CSS.supports snippet in the IE10 console to confirm branching logic.
• Check caniuse.com/css-grid — IE10 shows "Partial support" with prefix; Edge 12+ shows full unprefixed support.
• Review Microsoft's archived "CSS Grid Layout (legacy)" documentation on docs.microsoft.com (may redirect to archive.org) for the authoritative property list.

Practical Migration Path

If you control the codebase:

1. Wrap all -ms-grid rules in @supports (display: -ms-grid) blocks.
2. Write modern Grid equivalents in @supports (display: grid) blocks.
3. For broader legacy support (IE9, old mobile), fall back to flexbox or floats outside the @supports forks — not inside them.
4. Remove -ms-grid entirely once IE10 traffic is zero per your analytics.

This keeps the legacy engine isolated, prevents cascade collisions, and gives you a clean deletion point.