CSS 网格布局无法像我的 Flexbox 布局一样正确显示行

Question

问题：

我正在尝试构建一个 CSS 网格布局，以在三行 UI 中显示图片。但是，网格布局的行为并不符合预期，并且看起来与我实现的 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

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

预期行为

我希望网格布局出现在三行中，每行包含图像及其相应的文本，类似于我之前使用的 Flexbox 布局。

Flexbox 布局参考

这是我用于 Flexbox 布局的 CSS，它按预期工作：

.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 布局那样正确对齐。我的网格布局做错了什么？如何调整

grid-template-rows

和

grid-template-columns

以确保每个项目占据一整行？

我尝试过的

• 调整

  grid-template-rows

  和

  grid-template-columns

  。

• 更改

  .parent-container

  的宽度。

我需要什么帮助

如何正确使用 CSS 网格布局来为我的图片及其随附文本实现所需的三行布局，类似于我的 Flexbox 布局？

Answer 1

要实现所需的三行网格布局，每行包含图像和相应文本，您需要调整 CSS 网格设置。在当前布局中，您有 grid-template-rows: 1fr 1fr;，它只定义了两行。为了使其按预期工作，您应该：

设置 grid-template-rows 定义三行（对于每个图片和文本对）。 正确定义列和行，让网格项占据整行。

.parent-container {
  display: grid;
  align-items: start;
  justify-items: center;
  grid-template-rows: auto;  /* Automatically adjust based on content */
  grid-template-columns: 1fr; /* Single column layout for full width */
  row-gap: 20px;  /* Add gap between rows */
  width: 100%;
  max-width: 1200px;  /* Set a max-width for better responsiveness */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.harris-pitch, .north-strike, .canada-murder {
  width: 100%;  /* Make the images responsive */
  max-width: 400px;  /* Optional: Set max width for images */
}

.harris, .north, .canada {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.strike, .report, .charge, .agent, .election {
  margin-top: 10px;
}

HTML 保持不变

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