css - 如何格式化多个 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

我在发布后几秒钟就意识到了这个错误:只需将 justify-content 从中心更改为左侧或从以下代码片段中完全删除:

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