How can I format multiple CSS grids to look the same

Question

I have a php file that generates my html page with a grid container filled with contents for a each movie in the specified directory. All nested inside a foreach loop.

I'd like it to look like the top two movies in the photo.

It looks like:

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

I realized the error just a few seconds after posting: justify-content just needed changed from center to left or removed completely from the following snippet of code:

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