Need help making videos appear in a grid - html

Question

I am trying to place 6 videos in a grid with 2 rows with 3 videos per row. I am able to do this with one row but cannot seem to find a way to do it with 2.
My current code for the videos is:
<div class="videos1">
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
My css code is:
.videos1 {
display: flex;
justify-content: space-around;
gap: 50;
}
.video1 {
width: 32%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Thank you!

Answer 1

You should use css grids.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: ". . ." ". . .";
}
.container > div {
background-color: lime;
}
div:nth-child(2n) {
background-color: chocolate;
}
<div class="container">
<div>video 1</div>
<div>video 2</div>
<div>video 3</div>
<div>video 4</div>
<div>video 5</div>
<div>video 6</div>
</div>

Answer 2

Try the original grid: a table -- but not exactly a <table>. For a layout solution <table> and table tags (<tr>, <th>, <td>, etc.) are discouraged for many reasons, but other tags that are assigned CSS property display with the values of table, table-row, table-cell, etc. are considered valid and acceptable (see Figure I and this article).
Figure I
HTML Tag
CSS
table
display: table
tr
display: table-row
thead
display: table-header-group
tbody
display: table-row-group
tfoot
display: table-footer-group
col
display: table-column
colgroup
display: table-column-group
td, th
display: table-cell
caption
display: table-caption
Here's a simple example using semantic tags
/* Behave like a real <table> */
main {
display: table;
margin: 20px auto;
}
/* Behave like a real <tr> */
section {
display: table-row;
}
/* Behave like a real <td> */
figure {
display: table-cell;
}
/* Not required (optional) */
figcaption {
text-align: center;
}
<main>
<section>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
</section>
<section>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
<figure>
<iframe src="https://bestvpn.org/html5demos/assets/dizzy.mp4" width="160" height="90"></iframe>
<figcaption>Dizzy</figcaption>
</figure>
</section>
</main>