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