CSS media query for columns/gaps on older phones

[Rapha (Raphael Zwyer)]

For an Ecommerce site I’m using CSS media query on a page to control the columns and gaps for a product catalog/overview (grid-like lined up collection list items) at specified breakpoints.

As far as I was able to test it, it seems to work fine on most devices (with Chrome and Safari).
Except for an older iPhone 5 with iOS 10.3.4 and Safari: it ignores the gaps completely.

Is there anything I can do about that to make it work on older devices like that?

I added the CSS code below to an embed on the very top of the page:

<style>
	/* Defines amount of columns and gap between collection list items – by breakpoint */
  /* desktop and up */
.grid-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}
/* tablet */
@media screen and (max-width: 912px) {
  .grid-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.75rem;
  }
}

/* mobile landscape */
@media screen and (max-width: 720px) {
  .grid-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

/* mobile portrait */
@media screen and (max-width: 468px) {
  .grid-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
</style>

Here is my site Read-Only: Webflow - Ornament-is-crime

[webdev (Jeff Selser)]

I believe older versions of Safari on IOS support the non-standard grid-gap name.

[Rapha (Raphael Zwyer)]

Thank you, Jeff!
Does that mean I have to
1. duplicate the whole code and have it once with gap and once with grid-gap?
Or
2. can I just add one line for each width as in:
gap: 1.75rem;
grid-gap: 1.75rem;

To answer my own question, I just tried method 2.
Works like a charm!
I hope that’s considered clean code…

Thank you so much, Jeff!

[webdev (Jeff Selser)]

@Rapha

I hope that’s considered clean code

It’s common to use vendor prefixes to enable features for specific browsers. They will load what they are programmed to process and ignore the rest. So all good.

[Stan (justAnotherDeveloper)]

hi @Rapha I would like to just clarify one thing about gap vs grid-gap

When CSS Grid was released in 2017 there was introduced grid-gap property for creating gutters between rows and columns. In CSS Grid v2 released in December 2020 was introduced shorthand gap . One of reasons for gap property was introduction of gap for Flex Box so selector grid-gap will be confusing name to use in Flex. So now we have unified property for both technologies when we use these in combination together.

More information about compatibility of properties from current to vintage browsers can be found on https://www.caniuse.com
More info about current and future state of web can be found on https://www.w3.org
More info about latest version of CSS grid can be found on CSS Grid Layout Module Level 2

[Rapha (Raphael Zwyer)]

Thanks guys!
Appreciate it!