HTML中实现卡片式网页响应式布局-html教程-PHP中文网

css grid 实现响应式卡片布局最直接：用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 配合 gap 控制间距，卡片内用 flex column + min-height: 0 和 margin-top: auto 对齐底部，图片用 aspect-ratio 与 object-fit: cover 保证比例。

html中实现卡片式网页响应式布局

用 CSS Grid 实现响应式卡片布局最直接

不用 Flexbox 做主容器，Grid 天然支持行列控制、间距统一、对齐一致，避免 flex-wrap 错位和 justify-content 在小屏下失效的问题。

关键点是 grid-template-columns 配合 minmax() 和 auto-fit：

section.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

说明：

280px 是单张卡片最小宽度，适配手机竖屏（iPhone SE 等）
1fr 让剩余空间均分，比 auto-fill 更节省空白行
gap 替代 margin，避免外边距合并和响应式重算问题
不写 grid-auto-rows，让卡片高度自适应内容，避免截断或留白

卡片内部结构必须用 flex + min-height 控制视觉一致性

纯靠 padding 或 font-size 调整无法保证多张卡片底部对齐——尤其标题行数不同、描述长短不一的时候。

推荐结构：

<article class="card"><div class="card__content">
    <h3>标题</h3>
    <p>描述文字...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
														src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
													<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </div>
  <footer class="card__footer"><button>查看详情</button></footer></article>

对应样式要点：

.card { display: flex; flex-direction: column; height: 100%; }
.card__content { flex: 1; min-height: 0; } —— 必须加 min-height: 0，否则 flex 项不收缩，导致卡片高度被撑开
.card__footer { margin-top: auto; } 把按钮“钉”在底部