CSS Grid (grid-template-columns) fix for Safari? - html

Question

Recently I picked up webdesign again, creating a website for a free festival we're organising. Now I'm pretty exited about CSS Grid and everything seemed to be working out until someone told me the website looks quite stupid in Safari..
The lower part of the grid system is displayed as it is supposed to be.. on mobile. But the sponsor logo's below the header just appear to be a vertical list.
Now I could fix those logos in a different way with float probably, for the lower part I have no idea how to make it look the same, but I'd rather just find a workaround for Safari.
I expect it has something to do with grid-template-columns, tried some stuff (change from auto to fr and adding align/justify-self), but can't seem to figure it out myself. Could anyone here help me out?
HTML:
<div class="sponsors">
<div class="sponsorlogo">
<img src="img/Logo_Recupel.png" alt="Logo Recupel" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_StadBrugge.png" alt="Logo Stad Brugge" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_transform3.png" alt="Logo transform3" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_ecoFoundation.png" alt="Logo eco Foundation" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_AandePlas.png" alt="Logo Domein Aan de Plas" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_LegendsFreeWalkingTours.png" alt="Logo Legends Free Walking Tours" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_MoederAarde.png" alt="Logo Moeder Aarde" />
</div>
CSS:
.sponsors{
display: grid;
grid-template-columns: repeat(7, auto);
}
.sponsorlogo img{
object-fit: scale-down;
height: 100%;
max-width: 100%;
}
Live at http://pachafest.be
Thanks in advance!

Answer 1

Safari does not yet support intrinsic and extrinsic sizing with grid properties such as grid-template-rows (Source: Can I Use). You could use #supports
#supports (display: grid) {
.sponsors {
display: grid;
grid-template-columns: repeat(7, auto);
}
}
#supports not (display: grid) {
// Safari/IE style
}