我如何在CSS网格中并肩网格元素中心网格元素？

Question

我试图将两个网格元素并排居中。我希望标题，段落和底部链接是一个网格元素，图像是另一个网格元素。 网格 - 板块列：1fr 2fr;将一个元素推到了一个元素，另一个元素被推下：

.items {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1.5rem;
}

<main id="about" class="container">
  <div id="cardio" class="items">
    <h2>Program 1</h2>
    <h1><a href="#cardio">Cardio</a></h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam consequuntur exercitationem dolores ut, sunt eius recusandae ad saepe molestias dolorum accusantium consectetur nostrum inventore facilis voluptate rem eveniet tempora repudiandae
      nihil adipisci mollitia minus maxime labore! Eos facere, distinctio, fugit laboriosam voluptas cumque exercitationem maxime vitae reprehenderit omnis accusantium nam.</p>
    <div class="underline"></div>
    <h1><a href="#strength">Strength</a></h1>
    <div class="underline"></div>
    <h1><a href="#flexibility">Flexibility</a></h1>
    <div class="underline"></div>
    <h1><a href="#yoga">Yoga</a></h1>
    <div id="cardio-image">
      <img src="img/Cardio.png" />
    </div>
  </div>
</main>

Answer 1

将您的段落等放在自己的容器中，将产生您想要的带有自动置换算法的结果。您可以通过明确安置.Items的孩子来解决此问题，但是我认为这是最好的解决方案：

.items {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1.5rem;
}

<main id="about" class="container">
  <div id="cardio" class="items">
    <section>
      <h2>Program 1</h2>
      <h1><a href="#cardio">Cardio</a></h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam consequuntur exercitationem dolores ut, sunt eius recusandae ad saepe molestias dolorum accusantium consectetur nostrum inventore facilis voluptate rem eveniet tempora repudiandae
        nihil adipisci mollitia minus maxime labore! Eos facere, distinctio, fugit laboriosam voluptas cumque exercitationem maxime vitae reprehenderit omnis accusantium nam.</p>
      <div class="underline"></div>
      <h1><a href="#strength">Strength</a></h1>
      <div class="underline"></div>
      <h1><a href="#flexibility">Flexibility</a></h1>
      <div class="underline"></div>
      <h1><a href="#yoga">Yoga</a></h1>
    </section>
    <div id="cardio-image">
      <img src="img/Cardio.png" />
    </div>
  </div>
</main>