Макет CSS Grid не отображает строки правильно, как мой макет Flexbox ⇐ CSS

[Anonymous]

Вопрос:
Я пытаюсь создать макет сетки CSS для отображения изображений в пользовательском интерфейсе с тремя строками. Однако макет сетки ведет себя не так, как ожидалось, и отличается от макета Flexbox, который я реализовал. Вот мой код:
CSS для макета сетки

Код: Выделить всё

.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 для макета сетки

Код: Выделить всё

[img]pictures/download (1).jpeg[/img]
Lebanese Red Cross says 18 people killed in Israeli strike in the country's north
Report suggests multiple casualties in the Christian-majority region in the north of the country


[img]pictures/download.jpeg[/img]
LIVE Harris makes a pitch for the Black male vote as polls suggest fading support
The presidential candidates are campaigning in the battleground state of Pennsylvania on Monday in the final sprint of the election


[img]pictures/download (2).jpeg[/img]
India and Canada expel top diplomats over murder charges
Canada accuses agents of the Indian government of involvement in "homicides, extortion, and violent acts."

Ожидаемое поведение
Я ожидаю, что макет сетки будет отображаться в трех строках для каждого строка, содержащая изображение и соответствующий ему текст, аналогичный макету Flexbox, который я использовал ранее.
Макет Flexbox для справки
Вот CSS, который я использовал для макета Flexbox, который работает как ожидается:

Код: Выделить всё

.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;
}

Проблема
Похоже, что макет сетки ограничивает ширину строк, и строки не отображаются. правильно выровнено, как в макете Flexbox. Что я делаю не так с макетом сетки? Как я могу настроить строки-шаблона сетки и столбцы-шаблона сетки, чтобы каждый элемент занимал полную строку?
Что я пробовал

• Настройка строк шаблона сетки и столбцов шаблона сетки.
• Меняемся ширина .parent-container.

В чем мне нужна помощь
Как правильно использовать макет CSS Grid, чтобы получить желаемый трехрядный макет для моих изображений и сопровождающего их текста, аналогичный моему макету Flexbox?

Подробнее здесь: https://stackoverflow.com/questions/793 ... box-layout