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 >
    <div >
        <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  style="color:#ffffff">
        Coming Soon!
        </div>
    </div>
    <div >
        <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  style="color:#ffffff">
        Coming Soon!
      </div>
    </div>
    <div >
        <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  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!

CodePudding user response：

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

CodePudding user response：

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

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>