有没有办法使用CSS创建此布局？

Question

我有两个部分：英雄和关于部分。我正在使用一个容器，但对于“关于”部分，左侧的图像将位于容器行的外部，而右侧的内容将保留在容器内。我已附上我要完成的工作的照片。

.container {
  max-width: 1280px;
  margin: 0 auto;
}

#about {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content {
  background-color: #1A969F;
  padding: 2rem 8rem 2rem 3rem;
}

<section id="about">
  <div class="img">
    <img src="about-img.jpg" alt="">
  </div>
  <div class="content">
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, vitae! Quam, ipsam quidem autem numquam ipsa atque debitis similique pariatur aliquid, quibusdam labore mollitia dolorum temporibus et magni, commodi blanditiis.</p>
  </div>
</section>

Answer 1

来自评论：

是的，在网格中您缺少2列。 – G-Cyrillus

因此，我们将在about部分使用两个额外的网格列吗？我们是否仍然可以将容器类用于其他部分和navbar？ -Webdev1995

我在下面为您提供了一个示例，其中有2个额外的列（但在父级上；）），#about可以跨越 – G-Cyrillus

应在.container中使用附加列，在max-width中，您通过grid而不是minmax()上的max-width将.container设置在.container { margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(auto, 1280px) 1fr } section { grid-column: 2; background: #bee } #about { grid-column: 1 /span 3; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); } .img img { width: 100%; height: 100%; object-fit: cover; display: block; background: #eee } .content { background-color: #1A969F; padding: 2rem 8rem 2rem 3rem; }内。

这是一个主意：

<div class="container">
  <section>whatever of 1280px max-width</section>
  <section id="about">
    <div class="img">
      <img src="about-img.jpg" alt="about illustration">
    </div>
    <div class="content">
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, vitae! Quam, ipsam quidem autem numquam ipsa atque debitis similique pariatur aliquid, quibusdam labore mollitia dolorum temporibus et magni, commodi blanditiis.</p>
    </div>
  </section>
  <section>whatever of 1280px max-width</section>
</div>

{{1}}