网格模板区域不使用 SASS

Question

您好，我一直在尝试进行这种研磨布局，但网格模板区域不起作用。正如代码所示，我想在两行 6 列中实现它

#about-a .about-info {
  display: grid;
  grid-template-areas: "bioimage bio bio" "aw1 aw2 aw3";
  grid-gap: 1.2rem;
}

#about-a .bio-image {
  grid-area: bioimage;
}

#about-a .bio {
  grid-area: bio;
  border: 3px solid #a862ea;
  padding: 0.8rem;
}

#about-a .award-1 {
  grid-area: aw1;
}

#about-a .award-2 {
  grid-area: aw2;
}

#about-a .award-3 {
  grid-area: aw3;
}

#about-a .award-1 .fas,
#about-a .award-2 .fas,
#about-a .award-3 .fas {
  color: #a862ea;
  margin: 1rem;
}

<section id="about-a" class="text-center py-2">
  <div class="container">
    <h2 class="section-title">About Me</h2>
    <div class="bottom-line"></div>
    <p class="lead">A little about me and what I do..</p>
    <div class="about-info">
      <img src="image/about_new.jpg" alt="" class="bio-image">
      <div class="bio bg-light">
        <h4>All of my projects can be found on github..</h4>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, aspernatur enter code hereratione quia natus iure maxime corporis nemo exercitationem harum, inventore voluptate quis nisi commodi dolorum velit laudantium eum. Excepturi, autem!</p>
      </div>
      <div class="award-1">
        <i class="fas fa-award fa-3x"></i>
        <h3>Award One</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
      </div>

      <div class="award-2">
        <i class="fas fa-award fa-3x"></i>
        <h3>Award Two</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
      </div>

      <div class="award-3">
        <i class="fas fa-award fa-3x"></i>
        <h3>Award Three</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
      </div>
    </div>
  </div>
</section>

使用开发工具，布局显示在单行中，如下所示，而不是在 CSS 中实现，并且原始定义的布局被删除。

grid-template-areas:
        "bioimage" 
        "bio" 
        "bio"
        "aw1" 
        "aw2" 
        "aw3";

Answer 1

您缺少grid-template-colums: 元素。

解决方案：

#about-a .about-info {
  display: grid;
  grid-template-areas: "bioimage bio bio" "aw1 aw2 aw3";
  grid-gap: 1.2rem;
  grid-template-columns: 200px 300px //for instance
}

如果这不起作用，请随时在此处发表评论。