内容不会移动到指定的网格区域

Question

我有一个 2 列网格，我试图将我的放在左列中，将 (#footer-info) 文本放在右列中。我已经分配了网格区域，但它们不会移动到各自的列。 h1 和 article 都在左栏中相互重叠。

Text is all stacked on top in the left column, I want to move the below text to the right (indicated in red)

footer {
  background-color: $navy;
  color: $white;
  text-align: center;
  >div {
    position: relative;
    @include md {
      display: grid;
      grid-template-columns: 50% auto;
      grid-template-areas: "glazetitle location";
    }
    section {
      position: relative;
      z-index: 20;
      h1 {
        font-family: 'Caveat', cursive;
        font-size: rem-calc(35);
        font-weight: 700;
        color: $white;
        z-index: 1;
        @include md {
          grid-area: glazetitle;
        }
      }
      #footer-info {
        @include md {
          grid-area: location;
        }
        p {
          font-family: 'Padauk', sans-serif;
          font-size: rem-calc(16);
          line-height: rem-calc(22);
          color: $white;
        }
        ul {
          display: flex;
          justify-content: center;
          padding: 15px 0px;
          li {
            margin: 0px 10px;
            a:link,
            a:visited {
              color: $white;
              &:hover,
              &:active {
                color: $gray;
              }
            }
          }
        }
      }
    }
    #footer-scribble {
      background-image: url('../img/Footer/footer-scribbles.svg');
      height: 300px;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      width: 120%;
      z-index: 10;
      margin-left: -200px;
      @include md {
        width: 100%;
        height: 250px;
        margin-left: -150px;
      }
    }
  }
}

<footer class="grid-container content-spacing subhead-spacing">
  <div>
    <section>

      <h1>Glaze Studio</h1>

      <article id="footer-info">
        <p>1488 Lunetta Street<br> Philadelphia, PA 19106</p>

        <ul>
          <li><a href="https://twitter.com/explore" target="_blank"><i class="fab fa-twitter"></i></a></li>
          <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-square"></i></a>
          </li>
          <li><a href="https://www.instagram.com/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a>
          </li>
          <li><a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a></li>
        </ul>

        <p>215-925-3453<br> info@glazestudio.org
          <br> Icons: icons8.com</p>
      </article>

    </section>

    <aside id="footer-scribble"></aside>
  </div>

</footer>

如果我需要提供更多信息，请告诉我，我还是这个平台的新手。 ** address/phone 号码也是假的！不用担心。

Answer 1

我注意到了几件事。

您在中等断点中定义了一个 grid-template-areas: "glazetitle location"，但从未将它们分配给那里的相关标签。在这种情况下，它将是您的 section 标签和中等断点大小的 aside 标签。
为什么直接在页脚标签里面的div设置为相对的。后续问题是为什么 aside 标签设置为绝对位置？

我会说先解决这 2 个问题，然后这可能会解决您的整体网格问题。

内容不会移动到指定的网格区域

Content won't move to assigned grid areas

css

grid-layout

css-grid