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?