Zenn
Closed1

gridを使うときにchromeとsafariで見た目が異なることがある

CSS
na8esinna8esin
<style>
  body {
    display: grid;
  }
  div {
    border: solid 1px;
  }
</style>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>

こんなhtmlの場合に下記のように、chrome(左)、safari(右)のように見た目が異なる場合がある

解決策は下記のように追加する

 body {
   display: grid;
+  height: 100%;
 }
このスクラップは5ヶ月前にクローズされました