How to place videos in a grid

Question

I want to create a video archive that would look something like The videos take up 32% of the width each and have a gap of 50. The css code will also be below. My problem is that while I can make one row look like this, when I paste another row below it, it just all goes in the same row and the second group of 3 videos are squished together. I was wondering if there is a way that this can be fixed.

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>
</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;
}

Answer 1

You have to add flex-wrap: wrap, moreover gap: 50 doesnt have unities, you have to especify unities for example gap: 10px

Bonus

I also recommend using 'calc' when calculating the width, this way you don't have to use 'justify-content', you just have to calculate the space you want minus the 'gap' width: calc(33.33333% - 10px);

.videos1 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.video1 {
    width: calc(33.33333% - 10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    background-color:#f1f1f1;
}

Answer 2

Explanation

You haven't close <div class="videos1">.

Solution

Add </div> at the end of the HTML code you posted and you will be ready to cope paste it as many times as you like.

<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>
</div> <!-- here -->

Answer 3

Using CSS grid layout this should be quite strait forward.

Then use nth child to target certain rows for the shorter height in your example.

Here's an example from your code. For clarity, I've replaced the videos with just divs, but the concept is exactly the same.

.videos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px dashed blue;
}
.video {
    min-height: 6rem;
    border: 1px dashed red;
}
.video:nth-child(4n),
.video:nth-child(5n),
.video:nth-child(6n) {
    min-height: 3rem;
    border: 1px dashed orange;
}

<div class="videos">
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
    <div class="video"></div> 
</div>