CSSのgridを使うとSafariで崩れる問題

環境

• macOS 10.15.2
• Chrome 79.0.3945.130（Official Build)
• Safari 13.0.4 (15608.4.9.1.3)
• Firefox 72.0.2 (64 ビット)

問題点

下の記事の様にCSSで親要素のサイズをgridでのみ指定し明示的に指定しない状態で、子要素でサイズを親要素の最大値に設定すると、ブラウザによって表示のされ方が違う。

記事

https://entotsu44.hatenablog.com/entry/2020/01/27/070000

解決方法

下の様に親要素にも明示的にサイズを指定すると解決する。

.cell {
  width: 100%;
  height: 100%;
  border: solid 2px;
}