如何格式化多个CSS网格以使其外观相同

Question

我有一个php文件，该文件生成一个带有网格容器的html页面，其中装有指定目录中每部电影的内容。全部嵌套在一个foreach循环中。

我希望它看起来像照片中的前两部电影。

它看起来像：

代码： CSS：

.grid-item {
  justify-content: center;
  display: grid;
  grid-gap: 10px;
  padding: 10px;
}

.item1 {
  grid-column:1 / span 1;
  grid-row: 1 / span 1;
}

.item2 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 2;
}

.item3 {
  display: flex;
  grid-column: 2 / span 2;
  grid-row: 1 / span 3;
  align-items: center;
}

.grid-containerTest {
  width: 95%;
  display: grid;
  grid-gap: 20px;
  margin: auto auto 5px;
  flex-direction: column;
  top: 10px;
  bottom: 5px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
}

PHP / HTML：

echo '<div class="grid-containerTest">';
    if (file_exists($dir . '/xml/' . $withoutExt . '.xml')){
    echo '<div class="grid-item item1"><h3>' . $xml->title . '</h3></div>';
    }else{
        echo '<div class="grid-item item1"><h3>' . $withoutExt . '</h3></div>';
    }
    echo '<div class="grid-item item2"><video width="300" height="400" poster="'. $image .'" controls preload="none">';
    echo '<source src="'. $movie .'" type="video/mp4"></video></div>';
    echo '<div class="grid-item item3">' . $xml->overview . '</div>';
    echo '<br /><br /></div>';

Answer 1

发布后仅几秒钟，我意识到了该错误： 所需的证明内容从中心更改为左侧，或从以下代码段中完全删除：

.grid-item {
  justify-content: center;
  display: grid;
  grid-gap: 10px;
  padding: 10px;
}