CSS Grid Browser Support — What Works Where in 2025

CSS Grid is supported in all modern browsers. For most production sites in 2025, you can use CSS Grid without workarounds. Here’s what’s supported everywhere and what edge cases remain.

Use the CSS Grid Generator to build grid layouts that work across browsers.

Current browser support (2025)

Global support: ~97% of all browsers worldwide (Can I Use, 2025).

What you can use without any workarounds

All of these are safe for production:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1.5rem;
}

/* Auto-responsive card grid: */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Named areas: */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

/* Span placement: */
.featured {
  grid-column: span 2;
  grid-row: span 3;
}

subgrid: the newer feature

subgrid lets nested grids participate in the parent grid’s track definitions. Support is good but worth checking:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;  /* inherits parent's column tracks */
}

Chrome 117+, Firefox 71+, Safari 16+ — covers ~90% of browsers. For the remaining 10%, use explicit column definitions as a fallback.

Internet Explorer 11

IE11 has partial Grid support from 2012 based on an old spec draft. It uses -ms- prefixed properties that work differently from the modern spec:

/* IE11 Grid (old spec): */
.grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
}

.item {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

IE11 doesn’t support fr units, gap, auto-fill, minmax(), or named areas.

IE11 market share is below 1% globally. Unless your site has an unusual audience, skip IE11 support for new projects.

If you must support IE11, use a Flexbox fallback:

/* Flexbox fallback for IE11: */
.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 0 0 calc(33.33% - 1rem);
  margin: 0.5rem;
}

/* Grid enhancement for modern browsers: */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  .grid-item {
    flex: none;
    margin: 0;
  }
}

Feature detection with @supports

@supports lets you progressively enhance:

/* Base: works everywhere */
.layout {
  display: flex;
  flex-wrap: wrap;
}

/* Enhancement: Grid where supported */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
}

/* Further enhancement: subgrid where supported */
@supports (grid-template-columns: subgrid) {
  .card {
    grid-column: span 1;
    display: grid;
    grid-template-columns: subgrid;
  }
}

Old Safari quirks (pre-2020)

Safari 10.1–11 had some early Grid support but with bugs:

• gap wasn’t supported (use grid-gap instead — still works in modern browsers)
• Some minmax() edge cases
• Issues with auto in row sizing

For sites requiring Safari 11 support, test carefully and add grid-gap as a fallback alongside gap:

.grid {
  grid-gap: 1rem;  /* Safari < 12 */
  gap: 1rem;       /* modern */
}

Android browser compatibility

Chrome for Android tracks desktop Chrome — full Grid support. Samsung Internet 6.2+ also has Grid support. Nearly all modern Android browsers support Grid fully.

Testing across browsers

Tools for cross-browser Grid testing:

• BrowserStack — real browser testing on all versions
• Chrome DevTools device simulation — test responsive layouts
• Firefox DevTools Grid inspector — shows grid lines, numbered
• Can I Use — up-to-date compatibility tables

Related tools

• CSS Grid Generator — generate grid CSS visually
• CSS Grid Layout Guide — complete grid reference
• CSS Grid vs Flexbox — choosing the right layout tool