Как я могу отформатировать несколько 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-контент изменен из центра влево или полностью удален из следующего фрагмента кода:

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