6

I'm trying to figure out if there is something wrong that I'm doing or is CSS grid not supported in Safari (MacOS or iOS) even though everywhere they say it's supported?

I tried something like this:

  ul {
      list-style-type: none;
      text-align: center;
  }
  .grid {
        display: grid;
        grid-gap: 20px;
    }
    .grid-4 {
     grid-template-columns: repeat(4, auto);
 }
    <ul class="grid grid-4">
        <li class="grid-item">
            <img src="http://via.placeholder.com/350x150"/>
            <a href="/">Browse Online, Buy in Store</a>
        </li>
        <li class="grid-item">
            <img src="http://via.placeholder.com/350x150"/>
            <a href="/">Browse Online, Buy in Store</a>
        </li>
        <li class="grid-item">
            <img src="http://via.placeholder.com/350x150"/>
            <a href="/">Browse Online, Buy in Store</a>
        </li>
        <li class="grid-item">
            <img src="http://via.placeholder.com/350x150"/>
            <a href="/">Browse Online, Buy in Store</a>
        </li>
    </ul>

It works fine in Chrome, FF and even on latest Edge, but not on Safari 10.0.1

Lucas Prestes
  • 362
  • 1
  • 4
  • 19
AdrianS
  • 83
  • 1
  • 1
  • 8

2 Answers2

7

CSS Grid is only supported as of Safari 11.1 on Desktop and Safari 10.3 on iOS.

Ref: https://caniuse.com/#search=grid

Luke Glazebrook
  • 580
  • 2
  • 14
0

I referenced the same article as the previous comment about adding display:grid to the parent element, but it was inconsistent for me - it wouldn't work, then I unchecked that parent display:grid and it worked, and if I checked it again, it still worked properly.

I found an ::after pseudo-element - within the grid - that was taking up all available space and squeezing my columns (in my case) together, so they were all bunched up on the left and an image was squeezes super thin. I added this pseudo-element style to the original grid element:

.cocktails .grid::after {
    display: none;
}

...and it worked!

The reason it was flakey is that the pseudo-element disappeared after you played around with it in the view elements dev window.

Paul Hyland
  • 1
  • 1