CSS Grid Layout Not Displaying Rows Correctly Like My Flexbox Layout

Question:

I am trying to build a CSS grid layout to display pictures in a UI with three rows. However, the grid layout does not behave as expected and looks different from the Flexbox layout I implemented. Here is my code:

CSS for the Grid Layout

.parent-container {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  width: 100px;
  margin-left: 200px;
  margin-bottom: 20px;
}

.harris-pitch {
  width: 400px;
  height: 250px;
  margin-left: 20px;
  margin-top: 20px;
}

.harris {
  margin-top: 80px;
}

.black-men {
  margin-left: 20px;
  font-size: 20px;
}

.election {
  width: 400px;
  font-size: 15px;
  margin-left: 20px;
  margin-top: 10px;
  color: rgb(110, 109, 109);
}

.north-strike {
  width: 230px;
  height: 130px;
  margin-bottom: 15px;
}

.strike {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 3px;
}

.report,
.agent {
  color: rgb(110, 109, 109);
  margin-top: 10px;
  font-size: 14px;
}

HTML for the Grid Layout

<div class="parent-container">
  <div class="north">
    <img class="north-strike" src="pictures/download (1).jpeg">
    <div class="strike">Lebanese Red Cross says 18 people killed in Israeli strike in the country's north</div>
    <div class="report">Report suggests multiple casualties in the Christian-majority region in the north of the country</div>
  </div>
  <div class="harris">
    <img class="harris-pitch" src="pictures/download.jpeg">
    <div class="black-men"><span>LIVE</span> Harris makes a pitch for the Black male vote as polls suggest fading support</div>
    <div class="election">The presidential candidates are campaigning in the battleground state of Pennsylvania on Monday in the final sprint of the election</div>
  </div>
  <div class="canada">
    <img class="canada-murder" src="pictures/download (2).jpeg">
    <div class="charge">India and Canada expel top diplomats over murder charges</div>
    <div class="agent">Canada accuses agents of the Indian government of involvement in "homicides, extortion, and violent acts."</div>
  </div>
</div>

Expected Behavior

I expect the grid layout to appear in three rows with each row containing an image and its corresponding text, similar to the Flexbox layout I have used previously.

Flexbox Layout for Reference

Here is the CSS I used for the Flexbox layout that works as expected:

.container {
  max-width: 1000px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1em;
  font-family: Georgia, 'Times New Roman', Times, serif;
  padding: 20px 1px;
  margin-top: 10px;
}

.left, .right, .left-d, .right-d {
  max-width: 250px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 40px;
}

.middle, .middle-d {
  max-width: 400px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.live {
  width: 100%;
  display: flex;
}

Problem

The grid layout seems to be restricting the width of the rows, and the rows don’t appear correctly aligned like in the Flexbox layout. What am I doing wrong with my grid layout? How can I adjust the grid-template-rows and grid-template-columns to ensure each item occupies a full row?

What I Tried

• Adjusting the grid-template-rows and grid-template-columns.

• Changing the width of the .parent-container.

What I Need Help With

How can I correctly use the CSS Grid layout to achieve the desired three-row layout for my pictures and their accompanying text, similar to my Flexbox layout?