昨日これでだいぶ詰まってました。iOSではSafari、Chrome関係なくdisplay: gridのかかっている要素（グリッドアイテムの親要素）に明示的なheightがないとうまく動作しないようです。

CodePenは下記です。

See the Pen grid item doesn't have explicit height not working at iOS by hiroko ino (@hiroko_ino) on CodePen.

スタイリングとしては、display: gridの要素の更に親要素にpadding-top: xx%をdisplay: grid要素はabsoluteでwidth: 100%, height: 100%でお手軽レスポンシブ、、となるはずでした。そう、iOSさえなければね。最初はiOSだからどうせどこかにz-indexでもおもむろにかければ機嫌よくなるだろう、と思っていたのですがどうしてもだめでした。

内容物自体は出てくるみたいです。ですがグリッドアイテムがきちんと範囲に伸びていません（背景色が伸びてない）。最初はこれとoverflow: hiddenを併用していたのでoverflow: hiddenのバグかと思いましたが、hiddenをかけていなくても挙動としては動作してくれてないようです。

結局、gridのレスポンシブはheigt: xx vwを使うことになりました。vwだとwindowsだけスクロールバー分計算の対応しないといけないからめんどいんだよなあ、、もしこの記事ご覧の方でこのバグのハックの仕方ご存知の方いらしたらTwitterまでください、、