如何在Grid模板的文章卡片之间添加底部边框

问题描述 #

需要为代码中的三个卡片添加底部分隔边框，仅需添加border-bottom样式，但不确定添加位置。

解决步骤 #

• 第一步：整理HTML结构：原代码里的图片和标题没有分组为独立卡片，需要把每组<img>和<h2>用<div class="card">包裹，形成独立的卡片单元。
• 第二步：调整CSS样式：针对.card类添加border-bottom样式，同时优化布局让卡片显示更合理。

修改后的完整代码 #

CSS 代码 #

img {
  margin-right: 6px;
}
p {
  margin: 0;
}

body {
  max-width: 350px;
  min-width: 290px;
  display: grid;
  gap: 10px; /* 增加卡片间的间距，提升视觉效果 */
}
h2 {
  font-size: 16px;
  margin: 0;
  padding: 0;
}
h2.remove-whitespace {
  margin: 0;
  padding: 0;
  line-height: 18px;
  height: 55px;
}
.card {
  display: grid;
  grid-template-columns: min-content 1fr; /* 保持图片和标题横向排列 */
  align-items: center; /* 让内容垂直居中 */
  border-bottom: 1px solid #ccc; /* 底部分隔边框，颜色可按需调整 */
  padding-bottom: 8px; /* 避免内容紧贴边框 */
}

HTML 代码 #

<div class="card">
  <img src="https://images.unsplash.com/photo-1615147342761-9238e15d8b96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1001&q=80" height="60px" width="100px" />
  <h2 class="remove-whitespace">How the world is going to end all thsi baeses areblunt</h2>
</div>

<div class="card">
  <img src="https://images.unsplash.com/photo-1615147342761-9238e15d8b96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1001&q=80" height="60px" width="100px" />
  <h2 class="remove-whitespace">How the world is going to end all thsi baeses areblunt</h2>
</div>

<div class="card">
  <img src="https://images.unsplash.com/photo-1615147342761-9238e15d8b96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1001&q=80" height="60px" width="100px" />
  <h2 class="remove-whitespace">How the world is going to end all thsi baeses areblunt</h2>
</div>

补充说明 #

原代码中已经定义了.card类，但没有在HTML中实际使用，所以核心是先把图片和标题分组为卡片容器，再给容器添加底部边框样式，同时通过grid布局维持原有横向排列的视觉效果。

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