When dealing with a flex container that has 4 items and you want 3 per row while keeping the container centered, it can be tricky. Using justify-content to center the container may result in the fourth item on the second row also being centered. To address this issue, some CSS tricks like using ::after pseudo-element have been attempted, but they may lead to misalignment between rows.
The root of the problem seems to be the width of the flex container surpassing the content items' width, prompting the need to center it with justify-content, causing alignment issues.
Is there an easier way to achieve this layout using CSS grid? If so, how can we create a simple grid layout of iframe YouTube videos, with 3 videos per row and the last row aligned to the left?
Check out this code snippet for reference.
.section-vids ul {
list-style: none;
margin:0;
padding:0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.section-vids ul li {
padding: 20px;
}
.section-vids ul:after {
content: "";
flex: auto;
}<div class="container" id="media">
<section class="section-vids">
<ul>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
</ul>
</section>
</div>