I am working on a WordPress gravity form and used inline-grid for the layout.
It works perfectly in Firefox and Chrome.
But when it comes to Safari, display: inline-grid
does not work.
Although display: inline-block
works.
Run the following code snippet in Safari to see what I am talking about.
.item {
width: 50px;
height: 50px;
background-color: lightgray;
display: inline-block;
margin: 5px;
}
.item2 {
width: 50px;
height: 50px;
background-color: gray;
display: inline-grid;
margin: 5px;
}
<div class="item"></div>
<div class="item"></div>
<hr>
<div class="item2"></div>
<div class="item2"></div>
CSS Grid is only supported as of Safari 11.1 on Desktop and Safari 10.3 on iOS.
Most developers are afraid to start using CSS Grid because of browser support, but CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions.
It is definitely safe to use.
Conclusion. CSS Grid is awesome and it is ready for production 🚀. You don't need to wait until no one is using IE11 anymore to use CSS Grid for basic layouts.
Safari supports CSS Grid Layout
desktop -- from version 10.1
ios -- from version 10.3
http://caniuse.com/#feat=css-grid
Probably you're using not a very fresh Safari.
BTW, on my desktop v. 10.1.1 your code works as expected.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With