CSS Grid布局无法实现Flexbox式三行布局，求解决方法

问题描述 #

尝试用CSS Grid实现包含三个图文卡片的布局，要求效果和之前的Flexbox布局一致，但当前Grid布局表现不符合预期，存在行宽受限、对齐异常的问题。

当前Grid布局代码 #

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布局代码 #

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

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>

问题分析 #

当前Grid布局的核心问题：

1. 网格定义错误：grid-template-columns: 1fr 1fr仅定义2列，grid-template-rows:1fr 1fr定义2行，但实际有3个卡片元素，导致布局混乱。
2. 容器宽度设置过小：width:100px严重限制容器宽度，卡片内容无法正常展示。
3. 对齐方式不匹配：align-items: center和justify-items:center强制卡片居中，但Flex布局是align-items:flex-start（顶部对齐），两者表现差异明显。
4. 缺少间距设置：Flex用gap:1em设置卡片间距，Grid未设置该属性，导致卡片拥挤。

修复方案 #

调整.parent-container的Grid属性，匹配Flex布局的横向三卡片、顶部对齐、间距等效果：

.parent-container {
  display: grid;
  /* 定义3列，匹配Flex的左右250px、中间400px宽度 */
  grid-template-columns: 250px 400px 250px;
  /* 行高由内容自适应，无需固定比例 */
  grid-template-rows: auto;
  max-width: 1000px;
  width: 100%;
  /* 匹配Flex的上下边距，实现居中 */
  margin: 10px auto 20px;
  /* 和Flex一致，卡片顶部对齐 */
  align-items: flex-start;
  /* 添加卡片间距 */
  gap: 1em;
  /* 统一字体 */
  font-family: Georgia, 'Times New Roman', Times, serif;
  /* 匹配Flex的内边距 */
  padding: 20px 1px;
}

/* 优化卡片内部样式，避免溢出 */
.harris-pitch {
  width: 100%;
  height: auto;
  margin: 0 0 10px;
}

.harris {
  margin-top: 0;
}

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

.election {
  width: 100%;
  font-size: 15px;
  margin: 0;
  color: rgb(110, 109, 109);
}

.north-strike {
  width: 100%;
  height: auto;
  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;
}

关键调整点说明 #

• 网格列定义：grid-template-columns:250px 400px 250px完全匹配Flex布局的卡片宽度，确保三个卡片横向排列。
• 行高自适应：grid-template-rows:auto让行高由卡片内容决定，避免内容被截断。
• 容器尺寸与边距：设置max-width:1000px、margin:10px auto，和Flex布局保持一致，实现容器居中且宽度合适。
• 对齐与间距：align-items:flex-start实现顶部对齐，gap:1em添加卡片间的间距，和Flex效果统一。
• 卡片内部样式优化：将图片和文本宽度改为100%，避免超出网格容器，移除多余margin，让布局更整洁。

调整后，Grid布局即可实现和Flexbox完全一致的三卡片横向排列效果，每个卡片包含图片和对应文本，布局整齐符合预期。

内容的提问来源于stack exchange，提问作者Timothy Olubukola