如何使 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

将您的段落等放置在它们自己的容器中将通过网格自动放置算法产生您想要的结果。 您可以通过显式放置 .items 的子项来仅使用.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>