Hey there, I totally get the frustration—having your grid layout work perfectly on desktop but break on older mobile devices is such a headache. Let’s break down what’s going on and how to fix it.

Why This Happens #

Android 5 (Lollipop) comes with a super outdated version of the system browser/Chrome (usually Chrome 37-44, depending on the device). CSS Grid is a relatively modern layout feature that only became fully supported in Chrome 57 and later. Those older browsers don’t recognize display: grid at all, so they fall back to the default block layout—which is why you’re seeing nothing but a single column.

Solutions to Try #

1. Use Progressive Enhancement (Recommended) #

Start with a basic, universally supported layout, then layer on Grid for browsers that can handle it. This ensures all users get a usable experience, even if it’s not the exact grid design you want for modern devices.

Here’s a concrete example:

/* Base layout: Works on ALL browsers (including Android 5) */
.grid-container {
  display: block;
}

.grid-item {
  margin-bottom: 1.5rem; /* Add space between items in single-column view */
}

/* Grid layout: Only applies to browsers that support it */
@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .grid-item {
    margin-bottom: 0; /* Override base margin since we're using grid gap */
  }
}

2. Add a Flexbox Fallback for Multi-Column Layout #

If you want Android 5 users to see a multi-column layout (not just a single column), use Flexbox as a fallback. Flexbox has way better support on older Android devices (it works in Chrome 29+).

Modify the code above to include this fallback:

/* Base single-column layout */
.grid-container {
  display: block;
}

.grid-item {
  margin-bottom: 1.5rem;
}

/* Flexbox fallback for browsers that don't support Grid */
@supports not (display: grid) {
  .grid-container {
    display: flex;
    flex-wrap: wrap;
    margin: -0.75rem; /* Offset item margins to avoid extra outer spacing */
  }

  .grid-item {
    flex: 1 1 30%; /* Adjust this value to control column width */
    margin: 0.75rem;
  }
}

/* Grid layout for modern browsers */
@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 0; /* Override flexbox margin */
  }

  .grid-item {
    margin: 0; /* Override base/flexbox margins */
  }
}

3. Advise Users to Update Their Browser (When Possible) #

If you can, tell your Android 5 users to update their browser to the latest available version (Chrome still supports Android 5 with updates, though newer features won’t work). But keep in mind many users won’t bother with this, so relying on fallbacks is the most reliable approach.

Final Notes #

Older Android devices often lag behind on modern CSS support, so progressive enhancement is always a safe bet. By starting with a solid base layout and adding modern features on top, you ensure your site is usable for everyone—no matter what device they’re using.

内容的提问来源于stack exchange，提问作者Ajie Kurniyawan