我无法正确使用网格属性来创建特定布局

Question

我正在尝试创建图像中显示的布局，但我无法以任何可能的方式做到这一点，我尝试使用显示：网格、网格模板区域和几乎所有网格属性，但我找不到问题的根源，当我尝试设置网格模板列时，整个容器向左移动，当我尝试使用网格列或任何其他属性来定位网格单元中的元素时我希望它不会对容器内的所有元素做任何事情，就像它们被固定在适当的位置一样，可能是因为其他一些属性发生冲突，但我无法弄清楚可能发生的事情。

.header-container {
  display: flex;
  justify-content: space-between;
  padding: var(--elements-padding);
  align-items: center;
}

.suite-logo-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.beta-access-button-1 {
  width: 11.375rem;
  height: 3rem;
  border: solid black 1.5px;
  background-color: var(--clr-light-300);
  border-radius: 0.5rem;
  font-family: var(--ff-primary);
  font-weight: var(--ff-primary-bold);
  font-size: 0.875rem;
}

.beta-access-button-1:hover {
  cursor: pointer;
  background-color: #172339;
  color: var(--clr-light-300);
}

.section-container {
  padding: var(--elements-secondary-padding);
}

.solution-word-container {
  display: flex;
  width: 9.467rem;
}

.curved-line-container {
  position: relative;
}

.curved-line-image {
  position: absolute;
  bottom: 100%;
  left: 9.6rem;
  width: 9.467rem;
  object-fit: cover;
  padding-bottom: 0.5rem;
}

.h1-styling {
  font-size: 2.375rem;
  letter-spacing: -0.53px;
  color: var(--clr-dark-400);
}

.title-span-styling {
  font-weight: bold;
  color: var(--clr-dark-400);
}

.secondary-section-container {
  padding: var(--container-padding);
}

.primary-p-styling {
  padding-top: var(--padding-top);
  font-size: 16px;
  letter-spacing: 0.09px;
  line-height: 1.5;
  color: var(--clr-dark-300);
}

.beta-access-button-2-container {
  padding-top: var(--padding-top);
}

.beta-access-button-2 {
  border: 0;
  border-radius: 0.5rem;
  width: 16rem;
  height: 3.813rem;
  font-size: 1.125rem;
  font-family: var(--ff-primary);
  font-weight: var(--ff-primary-bold);
  letter-spacing: -0.18px;
  color: var(--clr-light-300);
  background-color: var(--clr-dark-400);
}

.beta-access-button-2:hover {
  background-image: linear-gradient(to bottom right, #a060ff, #cb30e3, #ffa84e);
  cursor: pointer;
}

.primary-article-container {
  padding: var(--elements-padding);
  padding-top: var(--padding-top);
}

.smartphone-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.third-section-container {
  padding-top: var(--padding-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.big-word-styling {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-weight: bold;
  color: var(--clr-dark-400);
}

.small-word-styling {
  padding-top: 1rem;
  padding-bottom: 2rem;
  font-size: 1rem;
  font-weight: var(--ff-primary-regular);
  color: var(--clr-dark-300);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.jeremy-image-container {
  display: flex;
  justify-content: center;
  margin-bottom: -30rem;
  margin-top: 3rem;
}

.jeremy-large-image-mobile {
  width: 15.75rem;
  height: auto;
  object-fit: cover;
  z-index: 3;
}

.secondary-article-container {
  position: relative;
  padding: var(--container-padding);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 15rem;
  background-color: var(--clr-dark-400);
  border-radius: 1rem;
  padding-top: 18rem;
  z-index: 2;
}

.small-curved-line-image {
  width: 3.125rem;
}

.article-h2-styling {
  font-family: var(--ff-primary);
  font-size: 2.5rem;
  color: var(--clr-light-300);
  padding-top: var(--padding-top);
}

.works-word-span {
  font-weight: var(--ff-primary-bold);
}

.article-paragraph-styling {
  padding-top: var(--padding-top);
  color: var(--clr-light-400);
  text-align: center;
  letter-spacing: 0.09px;
  line-height: 1.5;
}

.article-h3-styling {
  padding-top: var(--padding-top);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  color: var(--clr-light-300);
  text-transform: uppercase;
  line-height: 1.5;
  font-weight: var(--ff-primary-bold);
}

.h3-word-styling {
  letter-spacing: 2.5px;
  color: var(--clr-light-400);
  font-weight: var(--ff-primary-regular);
  padding-bottom: 2.5rem;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--clr-light-400);
  margin-top: -1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.footer-h2-styling {
  font-size: 0.983rem;
  font-weight: var(--ff-primary-regular);
  letter-spacing: 0.08px;
  padding-top: var(--padding-top);
}

.logo-buttons-container {
  padding-top: var(--padding-top);
  display: flex;
  gap: 2rem;
}

@media (min-width: 768px) {
  .header-container {
    padding-left: var(--tblt-padding);
    padding-right: var(--tblt-padding);
  }
  .grid-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 7rem;
    padding-left: var(--tblt-padding);
    padding-right: var(--tblt-padding);
  }
  .section-container {
    position: absolute;
    padding-right: 1rem;
    width: 30.438rem;
    padding-left: var(--tblt-padding);
    padding-right: var(--tblt-padding);
  }
  .grid-paragraph-container {
    padding-right: 8rem;
  }
  .primary-article-container {
    grid-column: 2/3;
  }
  .smartphone-image-tblt {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .curved-line-image {
    left: 14rem;
    width: 14.449rem;
  }
  .h1-styling {
    font-size: 3.5rem;
    letter-spacing: -0.78px;
    line-height: 1.1;
  }
  .third-section-container {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-left: var(--tblt-padding);
    padding-right: var(--tblt-padding);
  }
  .secondary-article-container {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .article-div-container {
    padding-left: var(--tblt-padding);
    padding-right: var(--tblt-padding);
  }
  .suite-logo-container {
    padding-top: 1.5rem;
  }
  .footer-container {
    height: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-top: -26.8rem;
    padding-top: 30rem;
  }
}

@media (min-width: 1280px) {
  .header-container {
    margin-top: 2rem;
    padding-left: var(--dkstp-padding);
    padding-right: var(--dkstp-padding);
  }
  .dsktp-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-right: var(--dkstp-padding);
    padding-left: var(--dkstp-padding);
  }
  .primary-article-container {
    padding-left: 16rem;
  }
  .smartphone-image-dsktp {
    height: 35rem;
    grid-column: 2/3;
  }
  .third-section-container {
    display: flex;
    flex-direction: column;
    grid-column: 3/4;
    padding-right: 10rem;
  }
  .article-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: var(--dkstp-padding);
    padding-right: var(--dkstp-padding);
  }
}

<header class="header-container">
  <picture>
    <img class="suite-logo-image" src="./assets/logo.svg" alt="Suite logo">
  </picture>
  <button class="beta-access-button-1">Request Beta Access</button>
</header>
<div class="dsktp-grid-container">
  <div class="grid-container">
    <section class="section-container">
      <picture class="curved-line-container">
        <img class="curved-line-image" src="./assets/pattern-curved-line-1.svg" alt="Black curved line">
      </picture>
      <h1 class="h1-styling">A <span class="title-span-styling">super <span class="s">solution</span></span> for your
        <span class="title-span-styling">business</span>.
      </h1>
      <div class="grid-paragraph-container">
        <p class="primary-p-styling">Our marketing and sales automations help you scale your outreach to get more leads for your company.</p>
      </div>
      <div class="beta-access-button-2-container">
        <button class="beta-access-button-2">Request Beta Access</button>
      </div>
    </section>
    <article class="primary-article-container">
      <picture class="responsive-image">
        <img class="smartphone-image" src="./assets/[email protected]" alt="Smartphone in a colorful background">
        <img class="smartphone-image-tblt" src="./assets/[email protected]" alt="Smartphone in a tall colorful background">
        <img class="smartphone-image-dsktp" src="./assets/[email protected]" alt="">
      </picture>
    </article>
  </div>
  <section class="third-section-container">
    <p class="big-word-styling">2K+
      <span class="small-word-styling">Companies</span>
    </p>
    <p class="big-word-styling">8
      <span class="small-word-styling">Languages</span>
    </p>
    <p class="big-word-styling">
      1.2M <span class="small-word-styling">Leads</span></p>
  </section>
</div>
<div class="article-grid-container">
  <div class="article-div-container">
    <picture class="jeremy-image-container">
      <img class="jeremy-large-image-mobile" src="./assets/[email protected]" alt="">
    </picture>
    <article class="secondary-article-container">
      <picture class="small-curved-line-container">
        <img class="small-curved-line-image" src="./assets/pattern-curved-line-2.svg" alt="">
      </picture>
      <h2 class="article-h2-styling">It just <span class="works-word-span">works.</span></h2>
      <p class="article-paragraph-styling">“I really like how it is an all-in-one solution that handle many of the tasks that you would normally need separate tools to do the same job. This thing is a miracle worker.”</p>
      <h3 class="article-h3-styling">Jeremy Robinson
        <span class="h3-word-styling">CMO, Fylo</span>
      </h3>
    </article>
  </div>
</div>

我尝试在 HTML 中创建不同的 div 来正确分隔每个网格子项，然后将 display: grid.但这也不起作用，几乎任何你能想到的解决方案都不起作用，所以我的结论是，有东西与这个特定的容器发生碰撞，但我找不到它是什么。