为什么我的CSS Grid顺时针旋转？

Question

我一直在互联网上尝试修复此问题，但没有运气！我已经完成了几个CSS网格概念，即。网格模板区域并依靠自动行功能。现在，我尝试尽可能简单地布置列和行，并且我的网格只是沿顺时针方向移动，而不是正确地彼此层叠！

<header>
    <h1>
        <a href="CauldronHtml.html">Cauldron Luxury Bath</a>
  </h1>
</header>
<nav>
  <ul id="banner">
    <li class="btn"><a href="#">Products</a></li>
  </ul>
</nav>
<div id="prodImage">
  <img src="PictureDefault.png" alt="Image 1" id="prodImage1" />
  <img src="PictureDefault.png" alt="Image 2" id="prodImage2" />
</div>
<div id="prodInfo">
  <p id="prodInfo1">Here is the information about product numero uno. It is quite the heck of the product, eh? Buy buy buy!</p>
  <p id="prodInfo2">Here is the information about product numero uno. It is quite the heck of the product, eh? Buy buy buy!</p>
</div>
<footer>
  <ul class="footer">
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="footer">
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Facebook</a></li>
  </ul>
</footer>


/* CSS */

body {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 10px;
}
h1 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}
#banner {
  grid-column: 1 / span 3;
  grid-row: 2 / span 1;
}
#prodImage1 {
  grid-column: 1 / 2;
  grid-row: 3 / span 1;
}
#prodImage2 {
  grid-column: 2 / 3;
  grid-row: 3 / span 1;
}
#prodInfo1 {
  grid-column: 1 / span 1;
  grid-row: 4 / span 1;
}
#prodInfo2 {
  grid-column: 2 / span 1;
  grid-row: 4 / span 1;
}
footer {
  grid-column: 1 / span 3;
  grid-row: 5 / span 1;
}