Hey there, let's tackle this IE11 CSS Grid issue you're facing! The problem boils down to IE11 only supporting the old, pre-standard version of CSS Grid—it doesn't recognize modern features like repeat(auto-fill, minmax(...)), which is why your cards are stretching to full width instead of wrapping into columns.

Here are two solid solutions to get your layout working consistently across IE11 and modern browsers:

Solution 1: IE11-Compatible Grid Syntax with Media Queries #

We'll keep your modern Grid code for all browsers, then add IE11-specific rules using media queries to define fixed column counts for different screen sizes (since auto-fill isn't supported):

.gridLayout {
  /* Modern browsers get the auto-adaptive grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem; /* Space between cards */
}

/* Target IE11 specifically */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .gridLayout {
    display: -ms-grid;
    /* Default to 4 columns for wide screens */
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    /* IE11 doesn't support gap, so use padding if needed */
    padding: 0.5rem;
  }

  /* Ensure each card takes up one grid cell */
  .gridLayout > * {
    -ms-grid-column-span: 1;
    -ms-grid-row-span: 1;
    margin: 0.5rem;
  }

  /* Adjust columns for medium screens */
  @media (max-width: 999px) and (min-width: 750px) {
    .gridLayout {
      -ms-grid-columns: 1fr 1fr 1fr;
    }
  }

  /* Adjust columns for small screens */
  @media (max-width: 749px) and (min-width: 500px) {
    .gridLayout {
      -ms-grid-columns: 1fr 1fr;
    }
  }

  /* Single column for extra small screens */
  @media (max-width: 499px) {
    .gridLayout {
      -ms-grid-columns: 1fr;
    }
  }
}

Notes for this solution: #

• IE11 requires explicit column definitions, so we use media queries to mimic the "auto-fill" behavior as closely as possible.
• We add margins to grid items to replicate the gap effect (IE11 doesn't support grid gap).

Solution 2: Fallback to Flexbox for IE11 #

Flexbox has better support in IE11 than modern Grid, so we can use it as a fallback while keeping Grid for other browsers:

.gridLayout {
  /* Modern browsers use Grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* Target IE11 for Flexbox fallback */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .gridLayout {
    display: flex;
    flex-wrap: wrap;
    /* Negative margin to offset child margins (mimics gap) */
    margin: -0.5rem;
  }

  .gridLayout > * {
    /* Base width: 25% minus margin */
    flex: 0 0 calc(25% - 1rem);
    min-width: 250px; /* Enforce minimum card width */
    margin: 0.5rem;
    box-sizing: border-box; /* Ensure padding/border don't break width calculations */
  }

  /* Adjust columns for medium screens */
  @media (max-width: 999px) and (min-width: 750px) {
    .gridLayout > * {
      flex: 0 0 calc(33.333% - 1rem);
    }
  }

  /* Adjust columns for small screens */
  @media (max-width: 749px) and (min-width: 500px) {
    .gridLayout > * {
      flex: 0 0 calc(50% - 1rem);
    }
  }

  /* Single column for extra small screens */
  @media (max-width: 499px) {
    .gridLayout > * {
      flex: 0 0 calc(100% - 1rem);
    }
  }
}

Notes for this solution: #

• The negative margin on the parent plus positive margins on children replicates the gap behavior (IE11 doesn't support flex gap).
• box-sizing: border-box ensures your card's padding/border don't make it wider than intended.
• This approach will feel more consistent with modern browser behavior since Flexbox wraps items naturally when space is limited.

Quick Additional Tip #

Make sure your <MyComponent /> has box-sizing: border-box applied (either globally or directly to the component) to avoid layout issues when calculating widths.

内容的提问来源于stack exchange，提问作者Lonwabo Rarane