How to place videos in a grid-CodePudding

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

CodePudding user response：

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

CodePudding user response：

Explanation

You haven't close <div >.

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

CodePudding user response：

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