需要帮助使视频出现在网格中

Question

我试图将6个视频放在一个网格中，每排2行，每行3段视频。我可以用一行做这件事，但似乎找不到用2来做这件事的方法。

我当前的视频代码是：

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

我的css代码是：

.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

您应该使用css 格网。

​

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

​