如何在 CSS 网格中将并排的网格元素居中？

Question

我试图将两个网格元素并排居中。我希望标题、段落和底部链接是一个网格元素，而图像是另一个网格元素。 grid-template-columns: 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

将您的段落等放置在它们自己的容器中将使用网格 auto-placement 算法产生您想要的结果。您可以通过显式放置 .items 的子项来仅使用 CSS 来解决此问题，但我认为这是最好的解决方案：

.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>

如何在 CSS 网格中将并排的网格元素居中？

How do I center grid elements that are side by side in CSS Grid?

html

css

css-grid