CSS3グリッドギャップがiphoneで動作しない

Question

CSSを使用してテンプレートを作成していて、すべてうまくいきますが、グリッドギャップがiPhoneで機能していません。

<div class="grid"> 

     <h1 class="page-title"> 
      <?php echo $username; ?> 
     </h1> 

     <header class="header"> 
      Reviewed 
      <?php 
       $sql = $mysqli->query("SELECT `id` FROM `users` WHERE `username`='$username'"); 
       $result = $sql->fetch_assoc(); 
       $result = $result['id']; 

       $sql = $mysqli->query("SELECT COUNT(rating) FROM `reviews` WHERE `userid`='$result'"); 
       $result = $sql->fetch_assoc(); 

       echo " " . $result['COUNT(rating)'] . " "; 
       if ($result['COUNT(rating)'] == 1) { 
        echo "Movie"; 
       } else { 
        echo "Movies"; 
       } 

      ?> 
     </header> 

      <main class="main-content"> 
       Test 
      </main> 

      <aside class="sidebar"> 
       Sidebar 
      </aside> 

     <footer class="footer"> 
      Footer 
     </footer> 
    </div> 

CSS：

.grid { 
margin: 15px; 
display: grid; 
grid-template-columns: 1fr 1fr; 
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 
grid-template-areas: 
"index-title index-title" 
"index-header index-header" 
"index-main-content index-main-content" 
"index-sidebar index-sidebar" 
"index-footer index-footer"; 
grid-gap: 10px; 
} 

.page-title { 
grid-area: index-title; 
text-align: center; 
} 

.header { 
grid-area: index-header; 
border: 1px black solid; 
font-size: 20px; 
text-align: center; 
} 

.main-content { 
grid-area: index-main-content; 
background-color: green; 
} 

.sidebar { 
grid-area: index-sidebar; 
background-color: yellow; 
} 

.footer { 
grid-area: index-footer; 
background-color: purple; 
} 

@media screen and (min-width: 1062px) { 

.grid { 
    margin: 15px; 
    display: grid; 
    grid-template-columns: 1fr 500px 500px 1fr; 
    grid-template-rows: 1fr 1fr 2fr 1fr; 
    grid-template-areas: 
    ". index-title index-title ." 
    ". index-header index-header ." 
    ". index-main-content index-sidebar ." 
    " .index-footer index-footer ."; 
    grid-gap: 10px; 
} 
} 

私がページを最小化すると、ギャップが働いているが、私は私のiPhone SE、グリッドギャップISNでそれを確認したときに」これは私がこれまで持っているものです働いていますか？どうしてこんなことに？

私はあなたが

事前のおかげで、私の質問を理解することができます願っています。

Answer 1

「既知の問題」に行くと、それはSafariについて言っていることを見て、このページ（https://caniuse.com/#search=grid）を参照してください：

Safariがまだ内因性およびグリッドになど 性質をサイジングする外因性をサポートしていません。グリッドテンプレート行